2013-10-11 119 views
5

我已经从日期和日期在我的网页中放置了两个datepikcer来生成报告。我想在两个日期选择器上应用验证来选择日期。我已经为两个datepikcer设置了最小和最大日期编写了常见的jquery代码,但它不适用于我。我还在datepicker关闭时编写了设置最小和最大日期的代码。如何在jquery UI日期选择器中动态设置最小和最大日期

我的要求是,我想在datepicker初始化时动态设置最小和最大日期。然后之后还设置另一个最大和最小日期时,用户可以从任何日期选择器选择日期

$("#frm_date").datepicker({ 
showOn: 'button', 
buttonImage: 'images/calendar.gif', 
buttonImageOnly: true, 
dateFormat:'yy-mm-dd', 
onClose: function(selectedDate) { 
          $("#to_date").datepicker("option", "minDate", selectedDate); 
       } 
}); 


$("#to_date").datepicker({ 
showOn: 'button', 
buttonImage: 'images/calendar.gif', 
buttonImageOnly: true, 
dateFormat:'yy-mm-dd', 
onClose: function(selectedDate) { 
         $("#frm_date").datepicker("option", "maxDate", selectedDate); 
        } 
}); 

$(".datepick").datepicker({dateFormat:'yy-mm-dd',minDate:'2013-09-10' ,maxDate:'2013-10-10'}); 

回答

3

我已经解决了我使用下面的代码问题。
另请参阅下面的jQuery论坛网站上的解决方案。 https://forum.jquery.com/topic/how-to-set-minimum-and-maximum-date-dynamically-in-jquery-ui-date-picker

$.datepicker.setDefaults({ 
      showOn: 'button', 
      buttonImage: 'images/calendar.gif', 
      buttonImageOnly: true, 
      dateFormat: 'yy-mm-dd', 
      minDate: '2013-09-10', 
      maxDate: '2013-10-10' 
    }); 
    $('#frm_date').datepicker({ 
      onSelect: function(selectedDate) { 
       $('#to_date').datepicker('option', 'minDate', selectedDate || '2013-09-10'); 
      } 
    }); 
    $('#to_date').datepicker({ 
      onSelect: function(selectedDate) { 
       $('#frm_date').datepicker('option', 'maxDate', selectedDate || '2013-10-10'); 
      } 
    }); 

    $(".datepick").datepicker({dateFormat:'yy-mm-dd',minDate:'2013-09-10' ,maxDate:'2013-10-10'}); 
0

你可以调用beforeShow方法来设置显示日历之前的任何选项:

$("#to_date").datepicker({ 
    beforeShow:function(){ 
     $(this).datepicker('option', 
          { 
           minDate:new Date() 
          } 
         ); 
    } 
}); 
相关问题