根據當天的另一個clockpicker的選定值設置bootstrap clockpicker的MIN時間

我有四個文本框兩個日期和兩個時間來設置提醒，如：從27/07/2017 9:00到28/07/2017 14:05。根據當天的另一個clockpicker的選定值設置bootstrap clockpicker的MIN時間

我使用jQuery的DateTimePicker選擇日期和引導clockpicker（時鐘樣式選擇器）選擇時間。

根據第一次選擇的日期，我已經禁用了第二個datetimepicker的過去日期。

我的兩個代碼是：

   //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 
       });

現在的問題是，我想根據同一天第一選擇時間設置第二次。

示例：如果選擇了兩個字段的日期是28/07/2017和從第一clockpicker選擇的時間是10:00然後我只能選擇時間過去從第二clockpicker 10AM之前不是時間。

總之，要設置此clockpicker的最小值爲10:00。我閱讀過有關before和afterdone的方法，但不知道如何設置MIN值。

來源

2017-07-25 Preet

嗨，你一次。我不明白你爲什麼需要clockpicker。如果你使用默認的datetimepciker格式，你可以得到hh/MM/ss部分。也許你更喜歡clockpicker風格？如果是這樣，我會爲你檢查它。 – Nico

嗨，是的，我只想要這種風格。好的，謝謝你.. – Preet

由於clockpicker的作者沒有暴露MINDATE接口，我只能給自己寫下面的腳本。但最小日期時間不會反映在用戶界面中（仍然可以從第二個clockpicker選擇時間超過10AM，但該值不會更改）。我們可以先選擇datetimepicker2的問題尚未考慮。

<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>

來源

2017-07-25 03:47:14 Nico

好的，謝謝你的嘗試。將嘗試這種方式 – Preet

但對我來說價值在變化 – Preet

@Preet嘗試調試你的代碼，邏輯不是那麼複雜，它對我來說工作正常。 – Nico

根據當天的另一個clockpicker的選定值設置bootstrap clockpicker的MIN時間

回答

相關問題