Not able to set interval for time picker.

[nileshsonkusare-SQT]

Hi,

I have implemented time picker in my project .

But my requirement is allow user to select minute in interval of 5 only.

In this plugin I have not found any property to set time or minute interval/stepping.

Can you please guide me in this.

Thanks for the info

[dairejoyce]

Hi,

I have implemented time picker in my project .

But my requirement is allow user to select minute in interval of 5 only.

In this plugin I have not found any property to set time or minute interval/stepping.

Can you please guide me in this.

Thanks for the info

So I came here searching for the answer but, seeing the date of your question and further unsuccessful Googling, I suspected this hasn't been answered; so I gave it a go. This works nicely: if the time isn't set the a multiple of the minute interval it rounds to the nearest multiple and triggers the timepicker to remain (reopen) on the screen to give feedback to the user indicating the automatic change of the value they've selected - indicates to them that they selected an incorrect value, and it adjusts accordingly.

`

let picker_instances = new Array()
for(let [index,input] of Object.entries($('[data-function=select_time]'))) {
    // iterates through DOM objects retrieved by selector
    if(typeof input == 'object' && parseInt(index) == index) {
        // attach reference to picker_instances on DOM object for future reference
        $(input).data('instance-index',index)

        // bind plugin to DOM object and add instance reference to picker_instances
        picker_instances.push(
            $(input).bootstrapMaterialDatePicker({
                year:false,
                date:false,
                format:'H:mm',
                switchOnClick:true
            }).on('close',function(event) {
                // [QUOTE shylajah15] https://github.com/T00rk/bootstrap-material-datetimepicker/issues/186#issuecomment-470476058
                // Change the setDate function in the bootsrap-material-datepicker.js,
                //
                // setDate: function (date) {
                //  this.params.currentDate = date;
                //  this.$element.val(moment(this.params.currentDate).locale(this.params.lang).format(this.params.format));
                //  this.$element.trigger('change', this.params.currentDate);
                // }
                // [END QUOTE]

                let date = moment($(this).val(),'H:mm')
                let stepInterval = 5
                let minuteVal = moment(date).format('mm')
                if(minuteVal % stepInterval > stepInterval / 2) {
                    minuteVal = Math.ceil(minuteVal / stepInterval) * stepInterval
                } else {
                    minuteVal = Math.floor(minuteVal / stepInterval) * stepInterval
                }
                minuteVal = minuteVal < 60 ? minuteVal : 55

                if(minuteVal != moment(date).format('mm')) {
                    let fixedDate = `${moment(date).format('H')}:${moment(minuteVal,'mm').format('mm')}`
                    let index = $(this).data('instance-index')

                    picker_instances[index].bootstrapMaterialDatePicker('setDate',moment(fixedDate,'H:mm')) // setDate method on instance of this timepicker

                    $(this).focus() // focus to reopen timepicker
                    $('.dtp-btn-ok').click() // click ok button to skip hour selection
                }
            })
        )
    }
}`

[ashvechikov]

Hi,

I have implemented time picker in my project .

But my requirement is allow user to select minute in interval of 5 only.

In this plugin I have not found any property to set time or minute interval/stepping.

Can you please guide me in this.

Thanks for the info

You need to find this function in bootstrap-material-datetimepicker.js

_onSelectMinute: function (e) {
         if (!$(e.target).hasClass('disabled')) {
            var value = $(e.target).data('minute');
            var parent = $(e.target).parent();
            var m = parent.find('.dtp-select-minute');
            for (var i = 0; i < m.length; i++) {
               $(m[i]).attr('fill', 'transparent');
            }
            var tm = parent.find('.dtp-select-minute-text');
            for (var i = 0; i < tm.length; i++) {
               $(tm[i]).attr('fill', '#000');
            }

            $(parent.find('#m-' + value)).attr('fill', '#8BC34A');
            $(parent.find('#tm-' + value)).attr('fill', '#fff');

            this.currentDate.minute(parseInt(value));
            this.showTime(this.currentDate);

            this.animateHands();

            if (this.params.switchOnClick === true)
               setTimeout(function () {
                  this.setElementValue();
                  this.hide();
               }.bind(this), 200);
         }
      }

and add this code

if (value % 5 != 0)
{
     return false;
}

after this line

var value = $(e.target).data('minute');