HTML5 Input Date "Hack" i18n

/g7mvaosL Google Chrome Only.

by Anov Siradj

HTML

<input type="date" class="datepicker5">
<input type="date" class="datepicker5" value="2017-06-16">
<input type="date" class="datepicker5" data-format="DD MMMM YYYY" value="2018-08-18">
<input type="date" class="datepicker5" data-format="YYYY MMMM DD" value="2018-08-18">

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/id.js"></script>

CSS

input[type=date].datepicker5 {
    position: relative;
    min-width: 150px;
    /* height: 20px; */
    /* color: transparent; */
}

/* display text */
input[type=date].datepicker5:before {
    /* position: absolute; */
    /* top: 3px; */
    /* left: 3px; */
    content: attr(data-display);
    /* display: inline-block; */
    color: black;
}

input[type=date].datepicker5::-webkit-datetime-edit,
input[type=date].datepicker5::-webkit-inner-spin-button,
input[type=date].datepicker5::-webkit-clear-button {
    display: none;
}

/* triangle-down icon */
input[type=date].datepicker5::-webkit-calendar-picker-indicator {
    position: absolute;
    /* top: 3px; */
    right: 0;
    color: black;
    opacity: 1;
}

JavaScript

moment.locale('id');
Array
.from(document.querySelectorAll('.datepicker5'))
.forEach(datepicker => {
	var cevent = new Event('change');
	var isoformat = 'YYYY-MM-DD';
	datepicker.addEventListener('change', ev => {
    var format = datepicker.dataset.format ? datepicker.dataset.format : isoformat;
    var mobject = moment(datepicker.value, isoformat);
  	datepicker.dataset.display = mobject._isValid ? mobject.format(format) : '\0';
  });
  datepicker.dispatchEvent(cevent);
});