UDACODING

Posts

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

Screenshot-from-2020-03-24-16-33-35 Mengubah Default Format  Tanggal/Date

Format dd/mm/yyyy

Screenshot-from-2020-03-24-16-34-12-1 Mengubah Default Format  Tanggal/Date

langkah – langkah

  1. 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>
  1. 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;
    }
  1. 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>
  1. jika sudah coba reload maka format tanggal akan berubah dari sebelumnya mm/dd/yyyy menjadi dd/mm/yyyy

Good luck!

Leave a Reply :

* Your email address will not be published.