JS Timepicker设置了和谐的最小和最大时间

debugcn 发表于 Dev

亚伦

我有一个timepicker从http://amsul.ca/pickadate.js/time/

有两个实例，开始和完成：

<div align="center">
    <span class="glyphicon glyphicon-time"></span>
    <label for="start_time">Start</label>
    <input name="start_time" id="start_time">
    <p></p>
    <span class="glyphicon glyphicon-time"></span>
    <label for="finish_time">Finish</label>
    <input name="finish_time" id="finish_time">
</div>

JS设置最小和最大时间：

<script type="text/javascript">
$(document).ready(function(){
    $('#start_time').pickatime({
        //format: 'h:i A',          // Displayed and application format
        formatSubmit: 'HH:i:00',
        hiddenName: true,
        interval: 15,               // Interval between values (in minutes)
        min: '3:00 AM',             // Starting value
        max: '6:00 PM'              // Ending value
        //finish_time.set('min': start_time)
    });

    $('#finish_time').pickatime({
        //format: 'h:i A',          // Displayed and application format
        formatSubmit: 'HH:i:00',
        hiddenName: true,
        interval: 15,               // Interval between values (in minutes)
        min: '3:00 AM',         // Starting value
        max: '6:00 PM'              // Ending value 
    });
});
</script>

我正在尝试做的是将start_time picker的最小开始时间设置为3:00 AM，但将finish_time picker的最小开始时间设置为start_time + 15min。您将如何去做呢？

埃桑

好的，您的代码将是这样，但是正如我在评论中提到的那样，您必须检查start_time + 15min是否在第二天。

的HTML

<div align="center">
    <span class="glyphicon glyphicon-time"></span>
    <label for="start_time">Start</label>
    <input name="start_time" id="start_time">
    <p></p>
    <span class="glyphicon glyphicon-time"></span>
    <label for="finish_time">Finish</label>
    <input name="finish_time" id="finish_time">
</div>

javascript

$(document).ready(function(){
    var finish_time = $('#finish_time').pickatime({
        //format: 'h:i A',          // Displayed and application format
        formatSubmit: 'HH:i:00',
        hiddenName: true,
        interval: 15,               // Interval between values (in minutes)
        min: '3:00 AM',         // Starting value
        max: '6:00 PM'              // Ending value 
    });

    var start_time = $('#start_time').pickatime({
        //format: 'h:i A',          // Displayed and application format
        formatSubmit: 'HH:i:00',
        hiddenName: true,
        interval: 15,               // Interval between values (in minutes)
        min: '3:00 AM',             // Starting value
        max: '6:00 PM',              // Ending value
        onSet: function(context) {
            var finish_time_min = context.select + 15;
            var hours = Math.floor(finish_time_min / 60);
            var minutes = (finish_time_min - (hours * 60));
            finish_time.pickatime('picker').set('min', [hours, minutes]);
        }                   
    });
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。