CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
David Grenier
David Grenier

Reputation: 1241

Getting value from JQUERY datepicker

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.

Upvotes: 31

Views: 186574

Answers (11)

Demon
Demon

Reputation: 21

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.

Upvotes: 1

CaptainGenesisX
CaptainGenesisX

Reputation: 405

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()}.` ;
```

Upvotes: 0

udorb b
udorb b

Reputation: 139

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

Upvotes: 1

Safyan Yaqoob
Safyan Yaqoob

Reputation: 552

You can also try this.

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

This is the simplest way.

Upvotes: 2

chapa
chapa

Reputation: 686

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?

Upvotes: 57

evan.z
evan.z

Reputation: 81

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

Upvotes: 2

TeeDeJee
TeeDeJee

Reputation: 3741

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

Upvotes: 0

John Gathogo
John Gathogo

Reputation: 4655

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

Upvotes: 2

run
run

Reputation: 1186

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

you must bind it to input element only

Upvotes: 6

Bright
Bright

Reputation: 72

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/

Upvotes: 5

mu is too short
mu is too short

Reputation: 434595

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.

Upvotes: 15

Related Questions