One of the simpliest implementation is the component.
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript">
$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>
One of the simpliest implementation is the component.
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii"
});
</script>
The default picker's position is at the bottom left of the button in the component implementation and under the input field in the simple implementation.
In some cases (narrow screens), it can be very usefull to place the picker under the input field in the component implementation.
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
todayBtn: true,
pickerPosition: "bottom-left"
});
</script>
Based on icon-remove class, a reset button can be activated to reset the content of the field.
In this implementation, the view date has been setup by default to the 21 december 2012.
Once the date and time are both setup, the popin will auto close, instead of staying open.
The button today has been activated too the fill the input field with the current datetime.
The minuteStep property can be used to specify the gap between each preset on the hour view.
<div class="input-append date form_datetime" data-date="2013-02-21T15:25:00Z">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
todayBtn: true,
startDate: "2013-02-14 10:00",
minuteStep: 10
});
</script>
On each update event, a secondary field is updated with a specific date format. Both id and format can be specified.
The reset method will clear too this field.
<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="text" id="mirror_field" value="" readonly />
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
linkField: "mirror_field",
linkFormat: "yyyy-mm-dd hh:ii"
});
</script>
To select the date using the meridian, you can activate the showMeridian flag and display P to view the AM/PM selector in the input field.
The HH format will display the hours in 12-format instead of 24-format hour.
<div class="input-append date form_datetime" data-date="2012-12-21T15:25:00Z">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - HH:ii P",
showMeridian: true,
autoclose: true,
todayBtn: true
});
</script>