如何在jQuery Mobile日期选择器中根据开始日期设置结束日期?

问题描述

我将jQuery-Mobile-DateBox用于jQueryMobile中的日期和时间选择器.

I use jQuery-Mobile-DateBox for date and time picker in jQueryMobile.

<input id="start" type="date" data-role="datebox" data-options='{"mode": "calbox", "afterToday": true, "useFocus": true, "overrideDateFormat": "%m/%d/%Y"}'>
<input id="end" type="date" data-role="datebox" data-options='{"mode": "calbox", "afterToday": true, "useFocus": true, "overrideDateFormat": "%m/%d/%Y"}'>

我不必允许用户选择开始日期之前的结束日期.

I need not to allow user to select end day that are before start day.

 $("#end").datebox("minDays", $("#start").val());

上面的代码不起作用.

推荐答案

以下是根据开始日期或结束日期的选择禁用日期的方法:

Here is how to disabled date as per selection of start or end dates:

如果在开始日期框中选择了一个日期，则结束日期将仅限于选择开始日期(包括开始日期)之后的天数，也可以选择Vise-verse作为结束日期.

If a date is selected in start datebox, then end date will be limited to selection of days after start date (inclusive of start date) and vise-verse for end date too.

$(document).on('pageinit', '#index', function(){
    $('#end-date').bind('datebox', function(e, p) {
        if ( p.method === 'open') {

          // Make it a date
          var startDate = new Date($('#start-date').val());

          var todaysDate = new Date();
          // Length of 1 Day
          var lengthOfDay = 24 * 60 * 60 * 1000;

          // Get the difference
          var diff = parseInt((((startDate.getTime() - todaysDate.getTime()) / lengthOfDay)+1)*-1,10);

          // Set minDays to disallow anything earlier
          $('#end-date').datebox({'minDays': diff});
        }

    });

     $('#start-date').bind('datebox', function(e, p) {
        if ( p.method === 'open') {

          // Make it a date
          var endDate = new Date($('#end-date').val());

          var todaysDate = new Date();
          // Length of 1 Day
          var lengthOfDay =  1000 * 60 * 60 * 24;

          // Get the difference
            var diff = parseInt((((endDate.getTime() - todaysDate.getTime()) / lengthOfDay)+1),10);

          // Set minDays to disallow anything earlier
          $('#start-date').datebox({'maxDays': diff});
        }

    });

});

检查更新的小提琴链接: http://jsfiddle.net/QTuma/6/

check the updated fiddle link: http://jsfiddle.net/QTuma/6/

或按以下方法解决一个更简单的方法来设置最小值和最大值:

OR as per below solution a simpler method to set min and max:

$(document).on('pageinit', '#index', function(){
    $('#start-date').bind('datebox', function(e, p) {
        if ( p.method === 'set') {
             var endDate = $('#start-date').val().replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})$/,'$3-$1-$2');
            $('#end-date').attr({'min':endDate,'max':'2999-01-01'});
            $('#end-date').datebox('applyMinMax');
        }
    });

     $('#end-date').bind('datebox', function(e, p) {
        if ( p.method === 'set') {
             var endDate = $('#end-date').val().replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})$/,'$3-$1-$2');
            $('#start-date').attr({'min':'1000-01-01','max':endDate});
            $('#start-date').datebox('applyMinMax');
        }
    });
});

这篇关于如何在jQuery Mobile日期选择器中根据开始日期设置结束日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！