8

I am using jquery datepicker to show a calendar.Now as per my requirement i want to get the date selected by the user in my jquery variable which i will use in my application but i am not able to get the date .. Here is the code for datepciker

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

and here i am trying to get the selected code..

$(document).ready(function () {

        $("#datepicker").datepicker({
            onSelect: function (dateText, inst) {
                var date = $(this).val();
                alert(date);
            }
        });

    });

But, I am not able to get the date ..Please help me ..Thanks..

eko
  • 39,722
  • 10
  • 72
  • 98
Hansal Mehta
  • 185
  • 2
  • 4
  • 14
  • 1
    probably duplicate question check this link [select date][1] [1]: http://stackoverflow.com/questions/11610797/trigger-function-when-date-is-selected-with-jquery-ui-datepicker – Prakash R Oct 31 '14 at 04:56
  • Your code works perfectly fine in this [JSBin](http://jsbin.com/yadohijuze/2/edit) I created. What errors (if any) are appearing in your console? – yetti Oct 31 '14 at 05:03

9 Answers9

40

This should do the trick

$(function() {
    $("#datepicker").datepicker();
    $("#datepicker").on("change",function(){
        var selected = $(this).val();
        alert(selected);
    });
});

It's basic but here is a jsfiddle with it alerting the selected date when selected

update to change the date format

$(function() {
    $( "#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" });
    $("#datepicker").on("change",function(){
        var selected = $(this).val();
        alert(selected);
    });
});

jsfiddle

3rd update

$(function() {
    $("#datepicker").datepicker({ 
        dateFormat: "yy-mm-dd", 
        onSelect: function(){
            var selected = $(this).val();
            alert(selected);
        }
    });
});

I have used a little more of the native markup for datepicker ui here try this and see if you get the alert as you are after.

4th Update

$(function() {
    $("#datepicker").datepicker({ 
        dateFormat: "yy-mm-dd", 
        onSelect: function(){
            var selected = $(this).datepicker("getDate");
            alert(selected);
        }
    });
});

The 4th method uses $(this).datepicker("getDate") instead of $(this).val() as $(this).datepicker("getDate") returns a date object and $(this).val() returns the date as a string.

Depending on your needs select which one is appropriate.

(Added 4th method and explanation of the difference after @TimothyC.Quinn commented that the getDate being the correct method)

akaBase
  • 2,178
  • 1
  • 18
  • 31
  • its working thanks...I have a query regarding the format of the date ..How can i change it to yyyy-MM-dd format – Hansal Mehta Oct 31 '14 at 05:01
  • @HansalMehta i just added a snippet that modifies the date format – akaBase Oct 31 '14 at 05:07
  • I am sorry to tell you that on implementing this also , I am not able to see any changes in the dateformat in alert message – Hansal Mehta Oct 31 '14 at 05:09
  • @HansalMehta im not sure why if you test the 2nd jsfiddle under my update you can see it the way you were asking in the alert and text field? – akaBase Oct 31 '14 at 05:10
  • yes i can see it in the fiddle demo ,, but why it is not not changing in my place – Hansal Mehta Oct 31 '14 at 05:12
  • @HansalMehta check your console log you might have a conflict thats all i can think of. – akaBase Oct 31 '14 at 05:22
  • @HansalMehta just made one last snippet after looking up on datepicker API, try that it might get what your after – akaBase Oct 31 '14 at 05:28
  • lower answer by Ferrakkem Bhuiyan complements this answer what if I want to know along also the date of not only the currently changed datepicker ` $(".datepicker[name=datepicker2]").datepicker('getDate');` – FantomX1 Sep 03 '19 at 15:22
  • The correct answer for the question here: https://stackoverflow.com/a/74368389/286807 – Timothy C. Quinn Nov 08 '22 at 23:40
  • @TimothyC.Quinn While true if the OP want's a date object, for the purposes of the OP's question that wasn't the case, that said I have updated my answer to include the `getDate` method and explanation on the difference. – akaBase Nov 09 '22 at 09:45
7

Though, question is answered, for people who just want a date object or set a date with specific format. There is simple functions jQuery provides. Here's working jsfiddle

$( "#datepicker" ).datepicker({ dateFormat: "dd-mm-yy" });

$("#datepicker").datepicker('setDate', '10-03-2020');
                 // pass string of your format or Date() object

$("#datepicker").datepicker('getDate');
                 // returns Date() object

$("#another_datepicker").datepicker('setDate', $("#datepicker").datepicker('getDate'));
                 // pass string of your format or Date() object
It's K
  • 177
  • 3
  • 15
1

Try

$("#datepicker").datepicker({
     onSelect:function(selectedDate)
     {
          alert(selectedDate);
     }
});

OR

$("#datepicker").datepicker({
     onSelect:function (dateText, inst)
     {
          alert(inst);
     }
});
Gowri
  • 1,832
  • 3
  • 29
  • 53
1

try this 

$('.selector').datepicker({
   onSelect: function(dateText, inst) { ... }
})

you have two elements with the class .datepicker, the selector won't know which element to choose from. So, you'll have to specify the name of the input you're trying to get the date from

first = $(".datepicker[name=datepicker1]").datepicker('getDate');
second = $(".datepicker[name=datepicker2]").datepicker('getDate');
eko
  • 39,722
  • 10
  • 72
  • 98
Ferrakkem Bhuiyan
  • 2,741
  • 2
  • 22
  • 38
0

You can use the changeDate event outlined here instead of onSelect and then reference e.date or e.dates. See the JSON below.

HTML:

<div id='QA'></div>    
<div id='datepicker'></div>

JS:

<script type="text/javascript">     
    $(function() {
        $('#datepicker').datepicker({
            clearBtn: true,
            todayHighlight: false,
            multidate: true

        }) .on('changeDate', function(e){
            $('#QA').html(JSON.stringify(e));
        });
    });
    /*
    {  
       "type":"changeDate",
       "date":"2015-08-08T07:00:00.000Z",
       "dates":[  
         "2015-08-08T07:00:00.000Z"
       ],
       "timeStamp":1438803681861,
       "jQuery21409071635671425611":true,
       "isTrigger":3,
       "namespace":"",
       "namespace_re":null,
       "target":{  

       },
       "delegateTarget":{  

       },
       "currentTarget":{  

       },
       "handleObj":{  
         "type":"changeDate",
         "origType":"changeDate",
         "guid":52,
         "namespace":""
       }
    }
    */

</script>
DanielJRobles
  • 33
  • 9
0

The ideal way is to get the date and convert it to a common format and utilize the same. (may passing to server or so.)

$("#datepicker").datepicker('getDate').toISOString()

so it will get the date in ISO stander.

BJ Patel
  • 6,148
  • 11
  • 47
  • 81
0

All code is for Bootstrap Datepicker

var calendar = $('#calendar').datepicker("getDate"); // Ex: Tue Jun 29 2021 00:00:00 GMT+0600 (Bangladesh Standard Time)

or

var calendar = $('#calendar').data('datepicker').getFormattedDate('yyyy-mm-dd'); // Ex: 2021-06-30

if(calendar){
  alert(calendar);
} else {
  alert('null');
}
Matthew Barlowe
  • 2,229
  • 1
  • 14
  • 24
Emon Ahmed
  • 1
  • 4
0

If you need it in specific format like '2021/09/28':

$.datepicker.formatDate('yy/mm/dd', 
    $('.date-picker-2').datepicker("getDate")
);
estinamir
  • 435
  • 5
  • 11
  • “Try this” answers are not useful.https://meta.stackoverflow.com/a/298811/4642212 Please add some explanation. Code-only answers are less useful for future readers and don’t explain the OP’s mistake or how to approach the problem – nima Sep 29 '21 at 09:10
0

Here is how to get Date object from datepicker in the onSelect event:

$("#datepickerid").datepicker({
    onSelect: function (dateText, inst) {
        var date_obj = $(this).datepicker('getDate');
    }
});

I find it strange that the onSelect caller would not return the date object by default.

Timothy C. Quinn
  • 3,739
  • 1
  • 35
  • 47