CODEWITHSUNDEEP
javascriptjqueryjquery-ui-datepicker
Zwen2012
Zwen2012

Reputation: 3498

jquery datepicker onSelect doesn't fire

I have a normal datepicker from jquery. It works fine, but the "onSelect" does not fire. Does anybody has an idea why this is not working? Also the "onClose" doesn't work.

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

And my HTML

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

Upvotes: 1

Views: 1949

Answers (2)

Amol Bhor
Amol Bhor

Reputation: 2522

If you are using jquery datepicker or daterange picker, then try below code.

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

Upvotes: 0

Sagar Arora
Sagar Arora

Reputation: 1773

If you using the jquery ui date picker then use the methods of it.

Here is working code for you.

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

    });

You can also do it like :

$(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);

});

Working JS Fiddle

Upvotes: 2

Related Questions