material-timepicker/css/material-timepicker.min.css
material-timepicker/dist/js/material-timepicker.min.js
material-timepicker/dist/i18n/%language%.js
{
let inputId = el.getAttribute('id'),
dataAttr = el.dataset,
dataShowClearBtn = dataAttr.showClearBtn === undefined?false:dataAttr.showClearBtn === 'true',
dataFormatSubmit = dataAttr.formatSubmit === undefined?undefined:dataAttr.formatSubmit,
dataDefaultTime = dataAttr.defaultTime === undefined?null:dataAttr.defaultTime,
dataFromNow = dataAttr.fromNow === undefined?0:dataAttr.fromNow,
dataAutoClose = dataAttr.autoClose === undefined?false:dataAttr.autoClose === 'true',
dataTwelveHour = dataAttr.twelveHour === undefined?true:dataAttr.twelveHour !== 'false';
// pass the time value from the field to the timepicker
if (dataDefaultTime === null) {
var pickerVal = '';
if (dataTwelveHour === true && el.value.match(':')) {
var curVal = el.value.split(':');
var hours = curVal[0],
minutes = curVal[1];
if (hours > 12) {
pickerVal = parseInt(hours - 12) + ':' + minutes + ' PM';
} else {
pickerVal = hours + ':' + minutes + ' AM';
}
} else {
pickerVal = el.value;
}
dataDefaultTime = pickerVal;
el.value = dataDefaultTime;
}
var fieldName = el.getAttribute('name');
// create an hidden input to submit a standard date
if (dataFormatSubmit !== undefined) {
let $inputSubmit = document.createElement('input');
$inputSubmit.type = 'hidden';
$inputSubmit.name = fieldName + '_submit';
$inputSubmit.value = el.value;
el.insertAdjacentElement('afterend', $inputSubmit);
}
let tpk = M.Timepicker.init(el, {
showClearBtn: dataShowClearBtn,
defaultTime: dataDefaultTime,
fromNow: dataFromNow,
autoClose: dataAutoClose,
twelveHour: dataTwelveHour,
i18n: materialTimeI18n,
onCloseEnd: function() {
if (dataFormatSubmit !== undefined) {
var hours = this.hours;
if (this.amOrPm === 'PM' && this.options.twelveHour === true) {
hours += 12;
}
$inputSubmit.value = hours + ':' + this.minutes;
}
var formId = document.querySelector("%selector%").closest('form').getAttribute('id');
var form = forms[formId];
if (typeof(form.fv) == 'object' && fieldName in form.fv.elements) {
form.fv.revalidateField(fieldName);
}
}
});
materialTimePickers[inputId] = tpk;
});]]>