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

时间:2016-11-12 04:40:28

标签: javascript timepicker

我有来自http://amsul.ca/pickadate.js/time/

timepicker

有两个实例,即开始和结束:

<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选择器的最小开始时间设置为3:00 AM,但是start_time选择器的最小值是为start_time + 15min选择的。你会怎么做呢?

1 个答案:

答案 0 :(得分:4)

好的,你的代码会是这样的,但正如我在评论中提到的那样,你必须检查 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]);
        }                   
    });
});