Trigger function when date is selected with jQuery UI datepicker

Question

How can I trigger onSelect event when I select a selected date on jQuery UI datepicker?

score 105 · Accepted Answer · edited Dec 29 '15 at 20:22

105

Working demo : http://jsfiddle.net/YbLnj/

Documentation: http://jqueryui.com/demos/datepicker/

code

$("#dt").datepicker({
    onSelect: function(dateText, inst) {
        var date = $(this).val();
        var time = $('#time').val();
        alert('on select triggered');
        $("#start").val(date + time.toString(' HH:mm').toString());

    }
});

edited Dec 29 '15 at 20:22

Zanon

29,231
20
113
126

answered Jul 23 '12 at 10:36

Tats_innit

33,991
10
71
77

5

Why 'onSelect' isn't listed as events on datepicker API?? – Pablo S G Pacheco Apr 25 '14 at 23:09
1

@PabloKarzin It is mentioned in `api documentation` here `:)` => http://api.jqueryui.com/datepicker/ and here => http://api.jqueryui.com/datepicker/#option-onSelect . – Tats_innit Apr 26 '14 at 05:01
11

Yes @Tats_innit, but not as an event. It's classified as a option. Maybe this is not wrong, but as a developer i like to consider it an event – Pablo S G Pacheco Apr 26 '14 at 19:56

score 12 · Answer 2 · answered Jul 23 '12 at 10:37

12

Use the following code:

$(document).ready(function() {
    $('.date-pick').datepicker( {
     onSelect: function(date) {
        alert(date)
     },
    selectWeek: true,
    inline: true,
    startDate: '01/01/2000',
    firstDay: 1,
  });
});

You can adjust the parameters yourself :-)

answered Jul 23 '12 at 10:37

RTB

5,773
7
33
50

@inkwai If my anwser helped please accept it so others can learn form it. If not how can i help you further? – RTB Jul 23 '12 at 13:43

score 7 · Answer 3 · answered Jul 23 '12 at 10:43

If you are also interested in the case where the user closes the date selection dialog without selecting a date (in my case choosing no date also has meaning) you can bind to the onClose event:

$('#datePickerElement').datepicker({
         onClose: function (dateText, inst) {
            //you will get here once the user is done "choosing" - in the dateText you will have 
            //the new date or "" if no date has been selected             
      });

score 5 · Answer 4 · answered Aug 27 '17 at 13:25

5

$(".datepicker").datepicker().on("changeDate", function(e) {
   console.log("Date changed: ", e.date);
});

answered Aug 27 '17 at 13:25

Serdar KUŞ

404
1
4
16

thanks, straightforward solution, without those val() funny stuff, also directly can be addressed this way ` $(".datepicker[name=datepicker2]").datepicker('getDate');` – FantomX1 Sep 03 '19 at 15:24
however when using functions like getDate when inside your handler, it fails when it tries to retrieve the status of datePicker object, like this https://stackoverflow.com/a/17288563/3419535 , `first = $(".datepicker[name=datepicker1]").datepicker('getDate');` – FantomX1 Sep 04 '19 at 21:29

score 0 · Answer 5 · edited Nov 21 '17 at 17:24

0

If the datepicker is in a row of a grid, try something like

editoptions : {
    dataInit : function (e) {
        $(e).datepicker({
            onSelect : function (ev) {
                // here your code
            }
        });
    }
}

edited Nov 21 '17 at 17:24

Allan Pereira

2,572
4
21
28

answered Jul 23 '12 at 10:37

Fseee

2,476
9
40
63

Trigger function when date is selected with jQuery UI datepicker

5 Answers5

Linked

Related