日期时间选择器 Bootstrap日期和时间表单组件。
来源:互联网 发布:premise 知乎 编辑:程序博客网 时间:2024/06/12 02:27
Default input
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>
Default component
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>
Advanced
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>
Mirror field
On each update event, a secondary field is updated with a specific date format. Bothid
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>
Meridian format
To select the date using the meridian, you can activate the showMeridian
flag and displayP
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>
http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
- 日期时间选择器 Bootstrap日期和时间表单组件。
- Bootstrap日期和时间表单组件运用兼容ie8
- Bootstrap日期和时间表单组件运用兼容ie8
- Bootstrap日期和时间表单组件datetimepicker的使用
- js日期时间选择器bootstrap
- 时间选择器和日期选择器
- bootstrap-datetimepicker日期时间选择器使用文档
- Bootstrap Datetimepicker(日期时间选择器)
- bootstrap日期时间选择器datepicker的使用
- android日期和时间选择器
- Android 日期和时间选择器
- Yii2.0中使用bootstrap日期和时间组件
- BootStrap 表单时间选择器
- 安卓界面组件----时间日期选择器
- TimePicker时间选择器和DatePicker日期选择器
- bootstrap日期时间控件
- 自定义日期时间选择器
- 日期时间选择器:datetimepicker
- Unity 导出xcode工程中 怎么设置为Append的方式导出之命令行
- 集合扩容问题(ArrList为例,常用集合扩容机制) -- JAVA 基础
- 高通AP侧新增AT命令流程
- Grub 命令行启动Windows全过程
- Spring初步-依赖注入的原理
- 日期时间选择器 Bootstrap日期和时间表单组件。
- Swift3.0学习笔记-Extensions
- hadoop 各种概念整理
- 三 机器人仿真软件Gazebo介绍
- ORA-报错解释
- 人工智能端走的不只是“饭碗”
- 马士兵Java自学之路
- UE4学习笔记
- 怎么选择便携式网络直播一体机体育赛事录播设备