get day,month,year values in jquery datepicker on button click

Question

How can I get the values of jquery datepicker after the user click the button. I found this How to get date, month, year in jQuery UI datepicker? but I need it to get done when the user click the button, not on the event when the user selected a date.

CODE:

     //FOR DATE PICKER
    $(function () {

     $('.dateRange').datepicker({
            dateFormat: 'mm-dd-yy',
            changeMonth: true,
            changeYear: true,
            yearRange: "1940: +nn"
          });
      });
      //When the button is click get the values of selected month,date,year
            function testDateRange() {

                 var date = $(this).datepicker('getDate');
                 alert(date);

              }

I tried this

    var x = $('#MainContent_startDate').val();

it outputs e.g. 2/23/2016 but what I needed output is

     Month: 2
     Date: 23
     Year: 2016

just put the code in click button – guradio Feb 23 '16 at 04:25 — guradio, Feb 23 '16 at 04:25

score 5 · Accepted Answer · answered Feb 23 '16 at 04:51

5

Try this:

 var dt = $("#datepicker").datepicker("getDate");
 var date = dt.getDate();
 var month = dt.getMonth()+1;
 var year= dt.getFullYear();

Use the above 3 variables to print or use in your code.

answered Feb 23 '16 at 04:51

Vinothkumar

235
1
7

hi, this is the error : Cannot read property 'getDate' of null – Francis Saul Feb 23 '16 at 05:02
It means the variable "dt" gets null value. May be this happened if there was no date selected in the datepicker. I checked this code in your sample jsFiddle and it works. Make sure the variable dt gets a date value before fetching the date,month,year values from it. – Vinothkumar Feb 23 '16 at 05:05
I have selected a value before clicking the button, can you show the fiddle? – Francis Saul Feb 23 '16 at 05:09
I'm using asp.net button, I call the js from code behind. – Francis Saul Feb 23 '16 at 05:22
Anyhow as per your question, if you are getting a full date value on this line- var date = $(this).datepicker('getDate'); Then you can obviously take date,month,year from that value as I explained in my answer. I have just updated your jsFiddle code to make it easy to understand. If you explain me exactly what is the problem to get it done because of the asp.net button, I can try to help you out – Vinothkumar Feb 23 '16 at 05:25
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104231/discussion-between-vinothkumar-and-francis-saul). – Vinothkumar Feb 23 '16 at 05:28
I am now using html button and it works as expected. I just wonder why it can't be done using asp.net button even though I call the same js function. – Francis Saul Feb 23 '16 at 05:33
The reasons could be, you have not marked the js function in a right way in C# code, or the id of the date picker control wasn't given correctly, you might tried using $(this) which will not work when you call from C# code. There could be several reasons behind it. – Vinothkumar Feb 23 '16 at 05:38

J-D · Answer 2 · 2016-02-23T04:42:14.297

1

Use

var date = $(datepickerid).datepicker("getDate")

on button click event function.

JSFiddle

edited Feb 23 '16 at 04:42

answered Feb 23 '16 at 04:27

J-D

1,575
1
11
22

it returns null , this is my code var x = $('#MainContent_startDate').datepicker("getDate"); alert(x); – Francis Saul Feb 23 '16 at 04:32

Metaphor · Answer 3 · 2016-02-23T05:19:43.423

1

Make sure that ur button id is 'btn' Try this:

function testDateRange()             
{
 dt = $("#datepicker").datepicker("getDate");

 var mon='Month: '+ (dt.getMonth()+1) +' \nYear: '+ dt.getFullYear() + ' \nDay: ' + dt.getDate();

alert (mon);

}


 $(document).ready(function () {

        $("#btn").click(
            function () {
                myDate();
            }            
        );
    });

edited Feb 23 '16 at 05:19

answered Feb 23 '16 at 05:05

Metaphor

374
1
5
20

score 1 · Answer 4 · answered Feb 23 '16 at 08:57

1

Hi you can use this :)

 var TestVar= $("#datepicker").datepicker("getDate");

     var Date = TestVar.getDate();

     var Month = TestVar.getMonth();

     var Year= TestVar.getFullYear();

answered Feb 23 '16 at 08:57

pst

59
1
2
10

thank you friend, have a look at the above answer, same as yours :-) – Francis Saul Feb 23 '16 at 09:33

get day,month,year values in jquery datepicker on button click

4 Answers4