JavaScript: Get the value of a date input field using Jquery

Question

I want to get the value of a date input field and alert it,but I always get an empty string or undefined. Any help on how to get the value of this field will be appreciated.

code -

var end = $('#datetimepicker2').val();

$('#sub').on('click', function () {
    alert(end);
});

HTML CODE

<input type="text" class="form-control input-group-sm" placeholder="Enter Date" id="datetimepicker" aria-label="...">

I am using bootstrap-datepicker plugin to get the date. EDIT: I want to get the date in yyyy/mm/dd format and store it in a variable

your id is datetimepicker and in jquery you have datetimepicker2, is that it? — Gabriel Mesquita
– Gabriel Mesquita, Commented Oct 25, 2017 at 15:47
@GabrielMesquita I have two input field for date. I copied the wrong one . But the code is correct. — Izuagbala
– Izuagbala, Commented Oct 25, 2017 at 15:49

Timothy Wood · Accepted Answer · 2017-10-25 16:00:20Z

3

When var end = $('#datetimepicker2').val(); gets executed, the <input id="datepicker2"> element has no value.

It remains empty because you have not defined an event handler to update it when the value has changed. The following should be a working example of what you are trying accomplish.

<table>
    <tr>
        <td><strong>Date Time Picker:</strong></td>
        <td>
            <input id="datetimepicker2" class="datetimepicker" value=""/>
        <td>
        <td><button id="sub">Submit</button></td>
    </tr>
</table>

<script>
    // If the datepicker2 input is empty, this will be empty, even after you change it.
    var end = $('#datetimepicker2').val();
    $('#datetimepicker2').datetimepicker();

    // This will update the "end" variable as it changes.
    $(document).on('change', '#datetimepicker2', function() {
        end = $(this).val();
    });

    $(document).on('click', '#sub', function () {
        alert(end);
    });
</script>

ps: I changed the $(x).on(event,function) to $(document).on(event,element,function) because I've had better results with this as the DOM is manipulated over time.

answered Oct 25, 2017 at 16:00

Timothy Wood

4873 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Izuagbala Over a year ago

you saved my day

Timothy Wood Over a year ago

I am glad that I could help. :)

j9070749 · Accepted Answer · 2017-10-25 15:44:06Z

0

 $('#datePicker').datepicker()
        .on("input change", function (e) {
            //$('.loadingBackground').show();

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

});

This will alert the date every time the date is changed.

Or on the click event:

var date = $('#datePicker').datepicker('getDate');
$('#sub').on('click', function () {
    alert(date);
});

answered Oct 25, 2017 at 15:44

j9070749

9552 gold badges11 silver badges22 bronze badges

Comments

Gabriel Mesquita · Accepted Answer · 2017-10-25 15:59:52Z

0

You must use the same id in your jquery like this:

$('document').ready(function(){
    $('#sub').on('click', function () {
        var end = $('#datetimepicker').val()
        alert(end);
    });
)}

And you probably want to get the value after you select the date and click the #sub button.

edited Oct 25, 2017 at 15:59

answered Oct 25, 2017 at 15:48

Gabriel Mesquita

2,4121 gold badge23 silver badges30 bronze badges

1 Comment

Gabriel Mesquita Over a year ago

You want to get the value after you click the #sub button? if it is put the var end declaration inside the click callback.

Collectives™ on Stack Overflow

JavaScript: Get the value of a date input field using Jquery

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related