-2

我在 jQueryMobile 中使用 jQuery-Mobile-DateBox 作为日期和时间选择器。

<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"}'>

我不需要允许用户选择开始日之前的结束日。

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

上面的代码不起作用。

4

2 回答 2

2

If you want to prevent end day from been lower then a start day

Working example: http://jsfiddle.net/Gajotres/QTuma/

HTML :

<label for="start-date">Start Date</label>
<input name="start-date" id="start-date" type="date" data-role="datebox" data-options='{"mode": "calbox", "useNewStyle":true,"overrideDateFormat":"%-m/%-d/%Y"}'/>
<label for="end-date">End Date</label>
<input name="end-date" id="end-date" type="date" data-role="datebox" data-options='{"mode": "calbox", "useNewStyle":true,"overrideDateFormat":"%m/%-d/%Y"}'/>

Javascript

$('#end-date').bind('datebox', function(e, p) {
    if ( p.method === 'set' && $('#start-date').val().length > 0) {
         e.stopImmediatePropagation();
         var startDate = new Date($('#start-date').val());
         var endDate = new Date($('#end-date').val());

         if (startDate > endDate)
         {
             $('#end-date').val('');
         }  
    }
});
于 2013-09-11T08:39:25.773 回答
2

以下是如何根据开始或结束日期的选择禁用日期：

如果在开始日期框中选择了日期，则结束日期将仅限于选择开始日期之后的天数（包括开始日期），并且结束日期也将被限制。

$(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/

或者按照下面的解决方案，一种更简单的方法来设置最小值和最大值：

$(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');
        }
    }); 
});
于 2013-09-11T08:23:33.857 回答