jquery datepicker onSelect不會觸發

Question

我有一個正常的來自jquery的datepicker。它工作正常，但「onSelect」不會觸發。有沒有人有一個想法，爲什麼這不起作用？另外「onClose」不起作用。

我的javascript：

var startDatepickerSettings = { 
     format: 'dd.mm.yyyy', 
     todayHighlight: true, 
     weekStart: 1, 
     onSelect: function (date) { 
      console.log(date); 
     }, 
     onClose: function() { 
      console.log("Closed"); 
     } 
    }; 

$('.startDate-selection').datepicker(startDatepickerSettings); 

而我的HTML

<input id="product_0_startDate" class="form-control startDate-selection form-control" type="text" readonly="readOnly" required="required" name="product[0][startDate]"> 

Answer 1

如果使用jQuery UI的日期選擇器，然後使用它的方法。

這裏是你的工作代碼。

<input id="product_0_startDate" class="form-control startDate-selection form-control" type="text" readonly="readOnly" required="required" name="product[0][startDate]"> 

    $(document).ready(function() { 



     $(".startDate-selection").datepicker({ 
      dateFormat: "dd-M-yy", 
      minDate: 0, 
      onSelect: function (date) { 
       var minDate = $(this).datepicker('getDate'); 
       $(this).datepicker('option', 'minDate', minDate); 
       alert("Right"); 
      } 
     }); 

    }); 

你也可以不喜歡它：

$(document).ready(function() { 

    var settings = { 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function (date) { 
      var minDate = $(this).datepicker('getDate'); 
      $(this).datepicker('option', 'minDate', minDate); 
      alert("Right"); 
     } 
    } 

    $(".startDate-selection").datepicker(settings); 

}); 

工作JS Fiddle

Answer 2

如果你正在使用jQuery的日期選擇或日期範圍選擇器，然後嘗試下面的代碼。

var today = new Date(); 
    var journeyStartDate = null; 
    var journeyEndDate = null; 

    jQuery('.fa-calendar').daterangepicker({ 
     autoUpdateInput: false, 
     autoApply: false, 
     minDate: today, 
     startDate: jQuery('input[name="startDate"]').value, 
     endDate: jQuery('input[name="endDate"]').value, 
     showDropdowns: true, 
     opens: 'left', 
     linkedCalendars: false, 
     locale: { 
      cancelLabel: 'Clear' 
     } 
    }); 

    jQuery('.fa-calendar').on('apply.daterangepicker', (ev: Event, picker: any) => { 
     journeyStartDate = picker.startDate.format('DD/MM/YYYY'); 
     journeyEndDate = picker.endDate.format('DD/MM/YYYY'); 
    }); 

    jQuery('.fa-calendar').on('cancel.daterangepicker', (ev: Event, picker: any) => { 
     journeyStartDate = null; 
     journeyEndDate = null; 
    });