
Mengubah Default Format Tanggal/Date
Assalamualaikum Warahmatullahiwabaraktuh, kali ini saya akan sharing ilmu bagaimana mengubah format input tanggal dari mm/dd/yyyy atau yyyy/mm/dd ke dd/mm/yyyy, berikut preview nya
Format mm/dd/yyyy

Format dd/mm/yyyy

langkah – langkah
- pada form input tanggal buat kodingan seperti dibawah ini
<a>Tanggal Mulai</a>
<input class="tm form-control" type="date" name="tanggal_mulai"
data-date-format="DD/MMM/YYYY" placeholder="dd/mm/yyyy" required autofocus>
- selanjutnya buat kodingan css untuk mengubah tampilan formnya
.tm {
position: relative;
/*width: 150px; height: 20px;*/
/*color: white;*/
display: block;
width: 100%;
height: 2.4rem;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
box-shadow: inset 0 0 0 transparent;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
align-content: center;
}
.tm:before {
position: absolute;
top: 10px; left: 3px;
content: attr(data-date);
display: block;
color: #495057;
}
.tm::-webkit-datetime-edit, .tm::-webkit-inner-spin-button, .tm::-webkit-clear-button {
display: none;
}
.tm::-webkit-calendar-picker-indicator {
position: absolute;
top: 10px;
right: 0;
color: #495057;
}
- lalu tambahkan script berikut ini
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js">
</script>
<script>
$(".tm").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD")
.format( this.getAttribute("data-date-format") )
)
}).trigger("change")
</script>
- jika sudah coba reload maka format tanggal akan berubah dari sebelumnya mm/dd/yyyy menjadi dd/mm/yyyy
Good luck!
Terima kasih ilmunya, sangat terbantu dan manfaat
Thanks kak