부트 스트랩 datetimepicker에서 jQuery datepicker에 동적으로 최소 날짜를 전달합니다.

Question

프로젝트 작업 중입니다. 사실 내 페이지에는 두 개의 datepicker가 있습니다. 하나는 부트 스트랩 datepicker이고 다른 하나는 jQuery datepicker입니다. 세 개의 날짜 필드가 있습니다. 하나는 시작 이벤트 날짜이고 다른 하나는 종료 이벤트입니다. 세 번째 datepicker는 여러 날짜를 선택하는 데 사용됩니다. 이제 첫 번째 선택된 날짜가 세 번째 datepicker의 최소 날짜로 작동해야하고 두 번째 datepicker 날짜가 세 번째 datepicker의 최대 날짜 제한으로 작동해야합니다. 그 값을 전달할 수 없습니다. 두 개의 서로 다른 날짜 피커, 즉 하나는 jQuery datepicker이고 다른 하나는 부트 스트랩 datetimepicker이므로 문제가 발생할 수 있습니다. 아이디어가 있으면 해결책을주세요. 첫번째 날짜 선택기의

은 // 코드

$('.form_start_datetime').datetimepicker({ 
    //language: 'fr', 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    startDate: new Date(), 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1 
}); 

두 번째 날짜 선택기의

// 코드

$('.form_end_datetime').datetimepicker({ 
    //language: 'fr', 
    weekStart: 1, 
    todayBtn: 1, 
    startDate: minDate, 
    autoclose: 1, 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1 


}); 

여러 날짜 // 코드 사전

에

jQuery(function() { 
// var startTime = $('#start_date_time').val(); 
// var splitTime = startTime.split(" "); 

if(jQuery("#multi-datepicker").length){ 
    jQuery("#multi-datepicker").datepicker({ 
     format :'yyyy-mm-dd', 
     minDate: new Date(2018, 1 - 1, 1), 
     onSelect: function (dateText, inst) { 
      addOrRemoveDate(dateText); 
      $(this).data('datepicker').inline = true; 
      $('#multi-datepicker').val(dates); 
      //console.log(splitTime[0]); 
     }, 
     onClose: function() { 
      $(this).data('datepicker').inline = false; 
     }, 
     beforeShowDay: function (date) { 

      var year = date.getFullYear(); 
      // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009" 
      var month = padNumber(date.getMonth() + 1); 
      var day = padNumber(date.getDate()); 
      // This depends on the datepicker's date format 
      var dateString = month + "/" + day + "/" + year; 

      var gotDate = jQuery.inArray(dateString, dates); 
      if (gotDate >= 0) { 
       // Enable date so it can be deselected. Set style to be highlighted 
       return [true, "ui-state-highlight"]; 
      } 
      // Dates not in the array are left enabled, but with no extra style 
      return [true, ""]; 
     } 

    }); 

감사를 선택

Answer 1

원하는 결과를 얻으려면 다른 날짜 표시기의 onSelect 안에 날짜 표시기의 minDate 및 maxDate을 설정할 수 있습니다.

Exaple :

$('.form_start_datetime').datetimepicker({ 

    //language: 'fr', 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    startDate: new Date(), 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1, 
    onSelect: function() { 
     var minDate = $(this).datepicker('getDate'); //get the selected date 
     $("#multi-datepicker").datepicker("option", "minDate", minDate); //sets min date for datepicker 
    } 
}); 

$('.form_end_datetime').datetimepicker({ 

    //language: 'fr', 
    weekStart: 1, 
    todayBtn: 1, 
    autoclose: 1, 
    startDate: new Date(), 
    todayHighlight: 1, 
    startView: 2, 
    forceParse: 0, 
    showMeridian: 1, 
    onSelect: function() { 
     var maxDate= $(this).datepicker('getDate'); //get the selected date 
     $("#multi-datepicker").datepicker("option", "maxDate", maxDate); //sets max date for datepicker 
    } 
});