Set bootstrap clockpicker's MIN time according to another clockpicker's selected value for same day

Question

I have four textboxes two for date and two for time to set a reminder like: from 27/07/2017 9:00 to 28/07/2017 14:05.

I am using jquery datetimepicker to select date and bootstrap clockpicker(the clock style picker) to select time.

I have already disabled the past dates for second datetimepicker according to first's selected date.

My code for both is:

                //datetimepicker
                $('.datetimepicker1').datetimepicker({
                    format: 'DD/MM/YYYY',
                    minDate: moment(),
                });

                $('.datetimepicker2').datetimepicker({
                    format: 'DD/MM/YYYY',
                });

                //clockpicker
                $('.clockpicker1').clockpicker({
                    placement: 'bottom',
                    align: 'right',
                    autoclose: true,
                    'default': '04:00',
              //any method like afterdone to set $('.clockpicker2') MIN time
                });

                $('.clockpicker2').clockpicker({
                    placement: 'bottom',
                    align: 'right',
                    autoclose: true,
                    //set minimum time for it
                });

Now, the problem is that I want to set second time according to first selected time for the same day.

Example: If date selected for both fields is 28/07/2017 and time selected from first clockpicker is 10:00 then I can only select time past 10AM from second clockpicker not time before that.

In short, want to set minimum value of this clockpicker to 10:00. I read about beforedone and afterdone methods but have no idea how to set MIN value in it.

Hi ,you again. I can't understand why you need clockpicker. If you use default datetimepciker format, you can get hh/MM/ss part. maybe you prefer clockpicker style? If so, i will check it for you. — NicoXiang, Jul 25 '17 at 03:00

score 2 · Answer 1 · answered Jul 25 '17 at 03:47

2

Since clockpicker's author didn't expose mindate interface, i can only write the script below by myself. But min datetime won't reflect in the UI( can still select time past 10AM from second clockpicker, but the value won't change). And the question which we can select datetimepicker2 first has not yet been considered.

<script>
  var flag = false;
  $(function () {

    $('#clockpicker1').clockpicker({
      placement: 'bottom',
      align: 'right',
      autoclose: true,
      'default': 'now',
      afterDone: function () {
        $('#clockpicker2').get(0).value = $('#clockpicker1').get(0).value;
        flag = true;
      }
    });


    $('#clockpicker2').clockpicker({
      placement: 'bottom',
      align: 'right',
      autoclose: true,
      afterDone: function () {
        if (flag) {
          if ($('#clockpicker2').get(0).value < $('#clockpicker1').get(0).value) {
            $('#clockpicker2').get(0).value = $('#clockpicker1').get(0).value;
          }
        }
      }
    });
  });
</script>

answered Jul 25 '17 at 03:47

NicoXiang

429
9
23

but for me the value is changing – Preet Jul 25 '17 at 04:05
@Preet try to debug your code, the logic is not so complex, it works fine for me. – NicoXiang Jul 25 '17 at 04:29
yeah the afterDone function doesnt hit – Preet Jul 25 '17 at 04:31
It worked actually i was referencing to .min file it doesnt have afterDone function. – Preet Jul 25 '17 at 05:52
@Preet git repo and docs [here](https://github.com/weareoutman/clockpicker). get latest version. – NicoXiang Jul 25 '17 at 05:56

score 1 · Answer 2 · answered Aug 02 '18 at 10:53

Try this:

  $("#datetimepicker1").on("dp.change", function (e) {
        $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
    });

    $("#datetimepicker2").on("dp.change", function (e) {
         $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
    });

Set bootstrap clockpicker's MIN time according to another clockpicker's selected value for same day

2 Answers2