获取日期时间输入字段的值

Question

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?

Answer 1

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>