Not Set Datetime Value To The Bootstrap DatetimePicker

user_3931073 0
Viewed 5094

I have update form. And this update form has bootstrap datetime picker and it has html code like as below: 

<div class="input-group date" id="startdateandtime" value="Thu Jul 25 1997 00:00:00">
  <input required="" type="text" class="form-control">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

I want to set any date and time of this picker when edit form is opened. But my jquery functions doesn't work. And value is not set to this datetime picker. I use jquery like as below: 

$('#startdateandtime').datetimepicker({
    date: new Date(1434544882775)
});

$("#startdateandtime").datetimepicker("update", new Date(1434544882775));

$("#startdateandtime").datepicker("setValue", "02-17-2012");

$('#startdateandtime').datepicker({
   onSelect: function () {
       $('#startdateandtime').text(new Date(1434544882775));
   }
});

All of the above jquery functions doesn't work. So that I can't set any datetime to the picker which is in the edit form.

I use bootstrap datetime picker. Bootstrap DateTimePicker css and js source files. And their version is 4.7.14.

How can I set any datetime to the datetime picker when edit form is opened ?

bootstrap-datetimepicker datetimepicker datetime jquery javascript
2 Answers

If you are using this bootstrap component: https://github.com/Eonasdan/bootstrap-datetimepicker you can reference date function this ways:

set value in the picker to current datetime:

$("#startdateandtime").data("DateTimePicker").date(new Date());

set value to timestamp (24/11/2017 11:41:41 ==> timestamp 1511520101020):

$("#startdateandtime").data("DateTimePicker").date(new Date(1511520101020));

set value to date string:

$("#startdateandtime").data("DateTimePicker").date("30/11/2017 11:30");

See http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date

Here is a working snippet:

$('#datetimepicker1').datetimepicker(
  {
    format: "DD/MM/YYYY HH:mm:ss", 
    toolbarPlacement: 'top',
    showClear: true, 
    showClose: true, 
    sideBySide: true
  }
);

$(document).ready(function() {
  $("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
})

function setTs() {
  $("#datetimepicker1").data("DateTimePicker").date(new Date(1511520101020));
}

function setNow() {
  $("#datetimepicker1").data("DateTimePicker").date(new Date());
}

function setDateStr() {
  $("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css">

<div class="row">
    <div class="col-md-4">
      <div class="panel-body">
        <form id="srcForm" data-toggle="validator">
          <div class="row">
            <div class="form-group col-xs-12">
              <label>Date</label>
              <div id="datetimepicker1" class="input-group">
                <input type="text" class="form-control" name="from">
                <span class="input-group-addon">
                  <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </div>
            </div>
          </div>
        </form>
        <div class="search-footer">
          <button type="button" class="btn btn-primary btn-search" onclick="setTs()">Set Date To TS</button>
          <button type="button" class="btn btn-primary btn-search" onclick="setNow()">Set Date To Now</button>
          <button type="button" class="btn btn-primary btn-search" onclick="setDateStr()">Set Date To Date String</button>
        </div>
      </div>
    </div>
</div>

user_44322080

I am sharing how I made it work with setDate OPTION:

var dateEx = "08/14/2022 01:57:00 AM";                   
$('#datetimepicker1').data('DateTimePicker').setDate(dateEx);

Hope it helps someone too!

user_12741200
Related