CODEWITHSUNDEEP
javascriptjquery
Itachi Uchiha
Itachi Uchiha

Reputation: 67

Get value of the date time input field

I want to alert the value of the date time input filed, but I get error "datetimepicker is not a function", the jQuery link I use

var time_start = $('#datetimepicker1').val();
$('#datetimepicker1').datetimepicker();

$(document).on('change', '#datetimepicker1', function() {
  time_start = $(this).val();
})

$(document).on('click', '#btn_ok', function() {
  alert(time_start);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div class="form-inline">
  <label style="padding-right: 10px">Từ</label>
  <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
  <br>
  <label style="padding-right: 10px; padding-left: 10px">đến</label>
  <div class="input-group date" id="datetimepicker2" data-target-input="nearest">
    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" />
    <div class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
      <div class="input-group-text"><i class="fa fa-calendar"></i></div>
    </div>
  </div>
</div>

How can I fix?

Upvotes: 0

Views: 771

Answers (1)

WizardCoder
WizardCoder

Reputation: 3461

The function for the jquery ui datepicker is datepicker, not datetimepicker. Also you were attaching the date time picker functionality to a div rather than to the input field. I have added an onSelect event, which will be called every time a date is selected in the calendar.

$('#datetimepicker1').datepicker({
  onSelect: function(dateText) {
    alert(dateText);
  }
});

$(document).on('click', '#btn_ok', function () {
   alert($('#datetimepicker1').val());
})
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<div class="form-inline">
    <label style="padding-right: 10px">Từ</label>
    <div class="input-group date" data-target-input="nearest">
         <input type="text" id="datetimepicker1" class="form-control datetimepicker-input">
    </div>
    <button id="btn_ok">Submit</button>
</div>

Upvotes: 1

Related Questions