Getting value from JQUERY datepicker

Question

If I want to display the JQUERY UI datepicker inline by attaching it to a DIV like $("div#someID").datepicker() - how do I access the chosen date? I assume if it's not bound to an INPUT then it won't be submitted with the form.

I guess as a followup, if I need to bind it to an INPUT element, is there a way to control the positioning of the datepicker relative to the INPUT element? If I wanted the datepicker to appear above or to the side of the element rather than below it, how would I do that?

Forgive me if this answer is somewhere really obvious.

score 57 · Accepted Answer · edited Feb 03 '17 at 08:58

57

If you want to get the date when the user selects it, you can do this:

$("#datepicker").datepicker({
    onSelect: function() { 
        var dateObject = $(this).datepicker('getDate'); 
    }
});

I am not sure about the second part of your question. But, have you tried using style sheets and relative positioning?

edited Feb 03 '17 at 08:58

Hakan Fıstık

16,800
14
110
131

answered Nov 16 '11 at 05:38

chapa

686
5
5

Thanks! I can't believe I somehow missed "getDate" when looking through the docs! I figure I'll probably have to go mess around with their style sheets, but I always get nervous hacking anything someone else has done. – David Grenier Nov 16 '11 at 13:48
1

how do you parse the date `"Wed Nov 08 2017 18:20:28 GMT+0100 (W. Europe Standard Time)"`? – NineCattoRules Nov 08 '17 at 16:37
1

Be sure you account for that the date is returned in __localtime__, not UTC(). To take the date as UTC, use `Date.UTC( dateObject.getFullYear(), dateObject.getMonth(), dateObject.getDate() );` – bobobobo Jan 07 '18 at 03:59

score 15 · Answer 2 · answered Nov 16 '11 at 05:28

15

You can use the getDate method:

var d = $('div#someID').datepicker('getDate');

That will give you a Date object in d.

There aren't any options for positioning the popup but you might be able to do something with CSS or the beforeShow event if necessary.

answered Nov 16 '11 at 05:28

mu is too short

426,620
70
833
800

score 6 · Answer 3 · answered Nov 16 '11 at 05:30

6

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

you must bind it to input element only

answered Nov 16 '11 at 05:30

run

1,170
7
14

http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control hope this may help u – run Nov 16 '11 at 05:33

score 5 · Answer 4 · answered Nov 16 '11 at 05:28

5

You could remove the name attribute of this input, so it won't be submited.

To access the value of this controll:

$("div#someID").datepicker( "getDate" )

and your may have a look at the document in http://jqueryui.com/demos/datepicker/

answered Nov 16 '11 at 05:28

Bright

72
1
2

1

Thanks! I can't believe I somehow missed "getDate" when looking through the docs! – David Grenier Nov 16 '11 at 13:46

score 2 · Answer 5 · answered Oct 13 '16 at 03:39

2

If your selected elements are not one, you need use this way:

$('[type="date"]').datepicker();
$('[type="date"]').change(function() {
    var date = $(this).datepicker("getDate");
    console.log(date);
});

answered Oct 13 '16 at 03:39

evan.z

81
1
2

score 2 · Answer 6 · answered May 22 '20 at 10:47

2

You can also try this.

$('#datepickerID').val();

This is the simplest way.

answered May 22 '20 at 10:47

Safyan Yaqoob

444
3
11

Can you explain a bit more? – Dieter Meemken May 22 '20 at 11:55
The #datepickerID part is the ID of the text field containing the selected date, and .val() is a function that grabs the value (the date) that's in that text field. So if I chose 09/01/2020 from the Date Picker, that value goes into my text field. The code above grabs that chosen date. – CaptainGenesisX Oct 01 '20 at 14:40
but this will return the date in string format. In case of localization this cloud be an issue – Nino Stella Feb 27 '22 at 15:18

udorb b · Answer 7 · 2020-08-25T09:01:59.390

see tag input example :

<div class="input-group date" data-target-input="nearest">
                        <input type="text" class="form-control datetimepicker-input form-control-sm" data-target="#dt_expdate" id="dt_expdate" />
                        <div class="input-group-append" data-target="#dt_expdate" data-toggle="datetimepicker">
                            <div class="input-group-text form-control-sm"><i class="fa fa-calendar"></i></div>
                        </div>
                    </div>

acess to get & assign value from

id="dt_expdate"

get value:

var date= $("#dt_expdate").val();

assign value:

$("#dt_expdate").val('20/08/2020');

score 2 · Answer 8 · answered Nov 16 '11 at 05:44

2

You could do it as follows - with validation just to ensure that the datepicker is bound to the element.

var dt;

if ($("div#someID").is('.hasDatepicker')) {
    dt = $("div#someID").datepicker('getDate');
}

answered Nov 16 '11 at 05:44

John Gathogo

4,495
3
32
48

score 1 · Answer 9 · answered Jun 17 '22 at 05:13

1

date = $("#datepicker").val();

this code will work, and also you can use this value by storing it into a variable date and it also used to limit another datepickers' value minDate or MaxDate.

answered Jun 17 '22 at 05:13

Demon

21
1

score 0 · Answer 10 · answered Feb 16 '13 at 16:23

0

To position the datepicker next to the input field you could use following code.

$('#datepicker').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginLeft: input.offsetWidth + 'px'});
    }
});

answered Feb 16 '13 at 16:23

TeeDeJee

3,756
1
17
24

score 0 · Answer 11 · answered Oct 01 '20 at 15:02

I needed to do this for a sales report that allows the user to choose a date range. The solution is similar to another answer, but I wanted to provide my example just to show you the practical real world use that I applied this to:

var reportHeader = `Product Sales History Report for ${$('#FromDate').val()} to ${$('#ToDate').val()}.` ;
```

Getting value from JQUERY datepicker

11 Answers11

Linked

Related