jquery datepicker onSelect不会触发

时间:2017-03-02 07:07:19

标签: javascript jquery jquery-ui-datepicker

我有来自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]">

2 个答案:

答案 0 :(得分:2)

如果你使用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

答案 1 :(得分:0)

如果您使用的是jquery datepicker或daterange picker,请尝试以下代码。

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