Bootstrap DatePicker: синхронизация между событиями со стертым текстовым событием - PullRequest
Новая
       6

Bootstrap DatePicker: синхронизация между событиями со стертым текстовым событием

0 голосов
/ 18 марта 2020

У меня есть 2 Bootstrap DatePickers (From / To), где выбор в каждом должен следовать правилу До-После.

Два вопроса:

1) Я выполнил это с on('changeDate') но мне также нужно захватить событие Text Erase . Если текст удален, Мин / Макс в каждом должен go к пределам по умолчанию 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>

1 Ответ

1 голос
/ 18 марта 2020

если я правильно понял вашу проблему, вы хотите, чтобы выбранная дата была лимитом или датой по умолчанию, если выбранная дата не выбрана, верно?

если да, можете ли вы использовать функцию внутри 

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

как 

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

для второго вопроса Я не могу восстановить проблему в jsFiddle

...