CODEWITHSUNDEEP
javascripthtmljquery
Habib Rifqi16
Habib Rifqi16

Reputation: 17

how to get value datetimepicker in jquery

excuse me want to ask. I'm sorry in advance if my language is not neat. how to get value datetimepicker from this form.

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

I managed to use the datetimepicker function and work but how to get value

$(function () {
    $('#reservationdate').datetimepicker({
        format: 'L',
    });
 
});

Upvotes: 0

Views: 1758

Answers (2)

jamajuice
jamajuice

Reputation: 26

What you did here only initiates the datepicker on that element

$('#reservationdate').datetimepicker({
   format: 'L',
});

Based on the documentation, you could then request the value in a few ways.

You would want to call the getValue method after initiation. Usually done after a form-submit or button click event.

$('#reservationdate').datetimepicker('getValue');

Another way would be to use this onChange handler:

$('#reservationdate').datetimepicker({
  format: 'L',
  onChangeDateTime:function(dp, $input){
    alert($input.val())
  }
});

Upvotes: 1

PressingOnAlways
PressingOnAlways

Reputation: 12356

UPDATE:

Additionally, your html code is not correct.

You want to be setting the reservationdate id on the input, not the div.

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

===========

You need to call the datepicker('getValue'); function.

For your example:

$('button.somebutton').on('click', function () {
    var d = $('#reservationdate').datetimepicker('getValue');
    console.log(d.getFullYear());
});

This returns a Date object which you can query the year, month, day or time.

Highly recommend you read through the entire documentation page - https://xdsoft.net/jqplugins/datetimepicker/. You might be able to find all these answers and more yourself.

Upvotes: 0

Related Questions