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小提琴

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;
    });