just a quick question. There is a way to force the Materialize TimePickers to display and select only the quarters of an hour (or some degree's fraction of 60 minutes)? I'm using Materialize as my frontend library for a Job, and it's mandatory that the time picked by the user is in a known format, and so I need to force the selection to some needed values.
I don't want to mess up with the library javascript, and I don´t want to change the user selection after the picker because it's not a good UX (Es: if the user select the 09:13 I don't want to change it after with a listener to 09:15)
Also, using some CSS tricks is not possible, because all the magic is done with the javascript.
I'm down to change timepicker as long as it's build on Material Design.
Any solution?
I'm talking about Materialize Time-pickers
Thanks a lot in advance
The only workaround that I found was this:
onOpenStart() {
if (!$(this.$el).siblings("input").hasAttr("interval")) return;
let interval = $(this.$el).siblings("input").attr("interval") || 15;
$(this.$el).find(".timepicker-minutes .timepicker-tick").each(function () {
if (parseInt($(this).text()) % interval !== 0) $(this).hide();
});
},
onSelect(hour, minute) {
if (!$(this.$el).hasAttr("interval")) return;
let interval = $(this.$el).attr("interval") || 15;
if (parseInt(minute) % interval !== 0) {
this.minutes = (parseInt(minute) % interval > (interval / 2)) ? (Math.ceil(parseInt(minute) / interval) * interval) : (Math.floor(parseInt(minute) / interval) * interval);
}
}
Note that $.fn.hasAttr(attr) is a custom function that returns a boolean, but it's straight forward
Anyway, If I define an attribute on the input element, named "interval" and eventually with a value, the script automatically hides all the minute divs that don't check the interval I choose and modify the minutes accordingly.