jQuery datepicker, onSelect won't work

Question

I can't get onSelect working on my jQuery datepicker.

Heres my code:

<script type="text/javascript">
$(function() {
    $('.date-pick').datePicker( {
        onSelect: function(date) {
            alert(date)
        },
        selectWeek: true,
        inline: true,
        startDate: '01/01/2000',
        firstDay: 1,
    });
});
</script>

It's like it doesn't register the onSelect function. What am I doing wrong?

score 92 · Accepted Answer · answered May 20 '09 at 12:58

92

No comma after the last property.

Semicolon after alert(date);

Case on datepicker (not datePicker)

Check your other uppercase / lowercase for the properties.

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

answered May 20 '09 at 12:58

Antony Carthy

5,549
9
34
38

2

In js you can ommit the semicolon if that's the end of the line and, like in many languages, you can put a comma after the last property. – soger Jul 07 '16 at 12:04

Ben Koehler · Answer 2 · 2014-04-01T20:43:44.473

15

datePicker's onSelect equivalent is the dateSelected event.

$(function() {
    $('.date-pick').datePicker( {
        selectWeek: true,
        inline: true,
        startDate: '01/01/2000',
        firstDay: 1,
    }).bind('dateSelected', function(e, selectedDate, $td) {
        alert(selectedDate);
    });
});

This page has a good example showing the dateSelected event and other events being bound.

edited Apr 01 '14 at 20:43

answered May 20 '09 at 13:47

Ben Koehler

8,633
3
23
23

score 8 · Answer 3 · edited Feb 24 '17 at 06:49

8

$('.date-picker').datepicker({
                    autoclose : true,
                    todayHighlight : true,
                    clearBtn: true,
                    format: 'yyyy-mm-dd', 
                    onSelect: function(value, date) { 
                         alert(123);
                    },
                    todayBtn: "linked",
                    startView: 0, maxViewMode: 0,minViewMode:0

                    }).on('changeDate',function(ev){
                    //this is right events ，trust me
                    }
});

edited Feb 24 '17 at 06:49

Umang Patwa

2,795
3
32
41

answered Feb 24 '17 at 06:02

Z.Y

81
1
1

i guess this is for bootstrap datepicker, nor jquery datepicker – Nick Kovalsky May 23 '18 at 18:33
changeDate does not trigger for me. Is there anything else I need to do? – JGV Jul 26 '19 at 17:18

samjudson · Answer 4 · 2013-06-17T11:10:36.253

5

The function datepicker is case sensitive and all lowercase. The following however works fine for me:

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

edited Jun 17 '13 at 11:10

answered May 20 '09 at 12:54

samjudson

56,243
7
59
69

"Error: Object doesn't support this property or method" on line 14, which is: $('.date-pick').datepicker( { – Tommy Jakobsen May 20 '09 at 13:02
See comment above about which 'date picker' you are using - my example is the JQuery UI one, yours appears to be a different one. – samjudson May 20 '09 at 13:19

Itamar · Answer 5 · 2010-11-09T15:46:11.407

4

The best solution is to set the datepicker defaults

folows the code that I used

$.datepicker.setDefaults({
    onSelect: function () {
        $(this).focus();
        $(this).nextAll('input, button, textarea, a').filter(':first').focus();
    }
});

edited Nov 09 '10 at 15:46

answered Nov 09 '10 at 13:39

Itamar

59
1
5

score 3 · Answer 6 · answered Oct 14 '12 at 04:02

<script type="text/javascript">
    $(function() {
        $("#datepicker").datepicker({ 
              onSelect: function(value, date) { 
                 window.location = 'day.jsp' ; 
              } 
        });
    });
 </script>

<div id="datepicker"></div>

I think you can try this .It works fine .

score 1 · Answer 7 · edited May 23 '17 at 11:54

1

I have downloaded the datepicker from jqueryui.com/download and I got 1.7.2 version but still onSelect function didn't work. Here is what i had -

$("#datepicker").datepicker();

$("#datepicker").datepicker({ 
      onSelect: function(value, date) { 
         alert('The chosen date is ' + value); 
      } 
});

I found the solution in this page -- problem with jquery datepicker onselect . Removed the $("#datepicker").datepicker(); once and it worked.

edited May 23 '17 at 11:54

Community

1
1

answered Dec 23 '09 at 17:38

srilatha

11
2

Howdy found the answer in another thread -- http://stackoverflow.com/questions/1274347/problem-with-jquery-datepicker-onselect I was using datepicker event twice on a div. Should only be initialized once. – srilatha Dec 23 '09 at 18:41

score 0 · Answer 8 · answered May 20 '09 at 12:52

0

It should be "datepicker", not "datePicker" if you are using the jQuery UI DatePicker plugin. Perhaps, you have a different but similar plugin that doesn't support the select handler.

answered May 20 '09 at 12:52

tvanfosson

524,688
99
697
795

Aha. Didn't knew there were different date picker plugins. Whats the correct plugin to use then? What I need is the "selectWeek: true" feature, and onSelect. – Tommy Jakobsen May 20 '09 at 12:56

jQuery datepicker, onSelect won't work

8 Answers8

Linked