problem with jquery datepicker onselect

Question

Following the basic onSelect spec on the jquery site I tried the following code:

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#datepicker").datepicker();


$('#datepicker').datepicker({
   onSelect: function(dateText, inst) { alert("Working"); }
});



  });

  </script>
</head>
<body style="font-size:62.5%;">

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

</body>
</html>

And can't get it to work! Originally been trying to get a more complicated thing to work but the onSelect was just not working so I went back to basics and still don't work, anyone any idea what I'm doing wrong??

Can you paste your html code where you create the datepicker? — Dirk, Aug 13 '09 at 20:25

score 45 · Answer 1 · answered Aug 13 '09 at 20:33

45

You're not using the api correctly. Don't take it bad, it's confusing at first.

Both of these lines are telling the datepicker widget to initialize a datepicker on an element:

$("#datepicker").datepicker();
$('#datepicker').datepicker({
   onSelect: function(dateText, inst) { alert("Working"); }
});

You could remove the first one since it's not doing anything except preventing the second one from having any effect.

If you want to change the value of one of the options after you've already initialized the widget then you would need to use this api:

$('#datepicker').datepicker('option', 'onSelect', function() { /* do stuff */ });

Or alternatively, you could attach a handler using jQuery's bind function:

$('#datepicker').bind('onSelect', function() { /* do stuff */ });

answered Aug 13 '09 at 20:33

Ken Browning

28,693
6
56
68

$("#datepicker").datepicker('destroy') and then setting up a new one with different options is another possibility - although in this case, just get rid of the first initialization. – gnarf Aug 13 '09 at 20:38
3

BIG WIN! Your first answer of $('#datepicker').datepicker('option', 'onSelect', function() { /* do stuff */ }); did just the trick for me. Many thanks! – NovaJoe May 07 '12 at 17:24
1

`$('#datepicker').datepicker('option', 'onSelect', function() { /* do stuff */ });` your answer worked for me thanks – Hitesh Oct 15 '14 at 09:52
check my question here- , I thought it was `drupal.behavior` issue but your trick seems to work for me http://drupal.stackexchange.com/questions/133694/advagg-drupal-module-breaking-my-js-file... if you want you can add ans there -- @Ken Browning – Hitesh Oct 15 '14 at 10:27

score 33 · Answer 2 · answered Jan 05 '16 at 09:27

33

Must this code work when select a date:

$("#datepicker").datepicker({
    dateFormat: 'dd/mm/yy'
}).on("changeDate", function (e) {
    alert("Working");
});

answered Jan 05 '16 at 09:27

hamzeh.hanandeh

733
6
21

2

Try all the variants and this was the only one which is working thanks @hamzeh – Abdullah Aug 04 '16 at 10:43
3

If anyone having a problem with methods that might because of you are using https://github.com/eternicode/bootstrap-datepicker so this is the way they are using – Maduka Jayalath Aug 21 '16 at 00:49
1

`"changeDate"` works for me too. `"option" "onSelect"` and other variants didn't work. Thanks! – Ghan Oct 23 '17 at 20:21
Thank you..it saves my time."changeDate" only worked! – Uma Dec 17 '20 at 10:22

score 13 · Accepted Answer · answered Aug 13 '09 at 20:25

13

You might try removing the second $("#datepicker").datepicker() immediately above that line, leaving:

$(document).ready(function(){
    $('#datepicker').datepicker({ onSelect: function(dateText, inst) { alert("Working"); } });
});

answered Aug 13 '09 at 20:25

VoteyDisciple

37,319
5
97
97

1

Since this question was last answered the event names are different. See here for events and examples: http://bootstrap-datepicker.readthedocs.io/en/latest/events.html – Stateful Aug 07 '16 at 09:30

score 0 · Answer 4 · answered Jan 04 '16 at 13:17

jQuery datepicker's onSelect doesn't work sometimes but you can just bypass it by calling a method on onchange event of your input type.

function changeDate() {
   $("#datepicker").datepicker(
        "change",
        { 
            alert("I am working!!");
        }
    );
}

Call this changeDate() method as-

<div type="text" id="datepicker" onchange ="javascript:changeDate();" />

problem with jquery datepicker onselect

4 Answers4

Linked