problem with jquery datepicker onselect

Asked 13/8, 2009 at 20:21 Answered 5/1, 2016 at 9:27

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??

Peirce answered 13/8, 2009 at 20:21 Comment(1)

Can you paste your html code where you create the datepicker? – Vervain 13/8, 2009 at 20:25

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

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

Weathers answered 13/8, 2009 at 20:25 Comment(1)

Since this question was last answered the event names are different. See here for events and examples: bootstrap-datepicker.readthedocs.io/en/latest/events.html – Cataclysm 7/8, 2016 at 9:30

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

Chenee answered 13/8, 2009 at 20:33 Comment(4)

$("#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. – Traditor 13/8, 2009 at 20:38

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

$('#datepicker').datepicker('option', 'onSelect', function() { /* do stuff */ }); your answer worked for me thanks – Tithonus 15/10, 2014 at 9:52

check my question here- , I thought it was drupal.behavior issue but your trick seems to work for me drupal.stackexchange.com/questions/133694/…... if you want you can add ans there -- @Ken Browning – Tithonus 15/10, 2014 at 10:27

Must this code work when select a date:

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

Prince answered 5/1, 2016 at 9:27 Comment(4)

Try all the variants and this was the only one which is working thanks @hamzeh – Satirist 4/8, 2016 at 10:43

If anyone having a problem with methods that might because of you are using github.com/eternicode/bootstrap-datepicker so this is the way they are using – Monkhmer 21/8, 2016 at 0:49

"changeDate" works for me too. "option" "onSelect" and other variants didn't work. Thanks! – Kappa 23/10, 2017 at 20:21

Thank you..it saves my time."changeDate" only worked! – Kazimir 17/12, 2020 at 10:22

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

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

Weathers answered 13/8, 2009 at 20:25 Comment(1)

Since this question was last answered the event names are different. See here for events and examples: bootstrap-datepicker.readthedocs.io/en/latest/events.html – Cataclysm 7/8, 2016 at 9:30

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();" />

Casteel answered 4/1, 2016 at 13:17 Comment(0)

Recommended topics

Hot tags