时间戳

首页 > 解决方案 > Bootstrap DatePicker：与擦除文本事件的从到同步

css - Bootstrap DatePicker：与擦除文本事件的从到同步

问题描述

我有 2 个 Bootstrap DatePickers (From/To)，其中每个选择都需要遵循前后规则。

两个问题：

1）我完成了它，on('changeDate')但我还需要捕获文本擦除事件。如果文本被删除，则每个中的最小值/最大值应达到默认限制 01/01/2010 -> 01/01/2050。

2）我也有这个问题：最初，我on('changeDate')在第一次创建这些日期选择器时附上了。然后我有一个Destroy and Regenerate按钮，它将.destroy()重新创建这些选择器，而无需先前的处理程序。但是，我看到保留了 onChange 行为。如果我破坏了控件并且在重新生成时从未重新指定它，为什么它会保留？

	$('#awardDateRangeStart').datepicker({
		 format: "mm/dd/yyyy",
		 startDate: "01/01/2010",
		 endDate: "01/01/2050",			 
		 autoclose: true, 
		 orientation: 'bottom', 
		 startView: "days", 
		 minViewMode: "days"   
	}).on('changeDate', function(){
	    // set the "toDate" start to not be later than "fromDate" ends:
	    $('#awardDateRangeEnd').datepicker('setStartDate', new Date($(this).val()));
	}); 	  
  
 	$('#awardDateRangeEnd').datepicker({
		 format: "mm/dd/yyyy",
		 startDate: "01/01/2010",
		 endDate: "01/01/2050",			 
		 autoclose: true, 
		 orientation: 'bottom', 
		 startView: "days", 
		 minViewMode: "days"   
	}).on('changeDate', function(){
	    // set the "fromDate" end to not be later than "toDate" starts:
	    $('#awardDateRangeStart').datepicker('setEndDate', new Date($(this).val()));
	});		
  
  
$('#regenerate').click(function() {
   $('#awardDateRangeStart').val('');
   $('#awardDateRangeEnd').val('');
   $('#awardDateRangeStart').datepicker("destroy");
   $('#awardDateRangeEnd').datepicker("destroy");
   // Recreate WITHOUT on-changeDate handler
 	$('#awardDateRangeStart').datepicker({
		 format: "mm/dd/yyyy",
		 startDate: "01/01/2010",
		 endDate: "01/01/2050",			 
		 autoclose: true, 
		 orientation: 'bottom', 
		 startView: "days", 
		 minViewMode: "days"  });  
 	$('#awardDateRangeEnd').datepicker({
		 format: "mm/dd/yyyy",
		 startDate: "01/01/2010",
		 endDate: "01/01/2050",			 
		 autoclose: true, 
		 orientation: 'bottom', 
		 startView: "days", 
		 minViewMode: "days"  });       
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script>

FROM <input type="text" id="awardDateRangeStart" />
TO <input type="text" id="awardDateRangeEnd" />

<button id="regenerate">Destroy &amp; Recreate Datepickers</button>

标签： csstwitter-bootstrapdatepickerbootstrap-datepicker

解决方案

如果我的问题正确，如果没有选定日期，您希望将选定日期作为限制或默认日期，对吗？

如果是这样，你可以在里面使用一个函数吗

('#awardDateRangeEnd').datepicker('setStartDate', new Date($(this).val()));

喜欢

('#awardDateRangeEnd').datepicker('setStartDate', function (){
  if($(this).val()){
       return new Date($(this).val()) }  
  else {
       return yourDefaultDate
       }
 });

对于第二个问题，我无法在 jsFiddle 中重新生成问题

推荐阅读