How to get the selected date from jquery datepicker

Question

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

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

akaBase · Accepted Answer · 2019-11-15T19:44:55.733

36

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.

edited Nov 15 '19 at 19:44

answered Oct 31 '14 at 04:58

akaBase

2,098
1
15
30

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

score 6 · Answer 2 · answered Oct 05 '20 at 13:25

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

score 1 · Answer 3 · answered Oct 31 '14 at 04:51

1

Try

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

OR

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

answered Oct 31 '14 at 04:51

Gowri

1,792
2
25
50

I tried this but not able to get the date .No alert message – Hansal Mehta Oct 31 '14 at 04:52
`$(document).ready(function () { $("#datepicker").datepicker({ onSelect: function (selectedDate) { alert(selectedDate); } }); });` tried this but no sucesss – Hansal Mehta Oct 31 '14 at 04:54
`
` IS this yout datepicker HTML? – Gowri Oct 31 '14 at 04:54

score 1 · Answer 4 · edited Nov 11 '16 at 08:31

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');

score 0 · Answer 5 · answered Aug 05 '15 at 19:57

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>

score 0 · Answer 6 · answered Dec 24 '20 at 14:28

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.

answered Dec 24 '20 at 14:28

BJ Patel

6,059
11
46
80

score 0 · Answer 7 · edited Sep 15 '21 at 06:38

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');
}

edited Sep 15 '21 at 06:38

Matthew Barlowe

2,099
1
11
22

answered Jun 23 '21 at 08:26

Emon Ahmed

1
4

estinamir · Answer 8 · 2021-09-29T14:44:53.910

0

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

$.datepicker.formatDate('yy/mm/dd', 
    $('.date-picker-2').datepicker("getDate")
);

edited Sep 29 '21 at 14:44

answered Sep 28 '21 at 21:43

estinamir

379
3
10

“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

How to get the selected date from jquery datepicker

8 Answers8

Linked