datetimepicker日期时间控件的使用方法使用经验

2025-10-24 12:36:27

1、页面上添加控件,将控件引入自己的页面

datetimepicker日期时间控件的使用方法使用经验

2、基本使用:$(".form_datetime").datetimepicker({});

调用:页面<input type="text" id="demo" > 

js $("#demo").datetimepicker();

datetimepicker日期时间控件的使用方法使用经验

3、format — 格式

String类型 

 

默认值: ‘mm/dd/yyyy’ 

 

这个是最重要最常用的属性之一了。控制显示格式就是固定值得个性化搭配。 

 

比如,显示 2020-11-09 19:21

js代码:$("#demo").datetimepicker({        format: 'yyyy-mm-dd hh:ii'        });

datetimepicker日期时间控件的使用方法使用经验

4、format — 格式也可以自己设计样式,里面的字母都代表不同属性

datetimepicker日期时间控件的使用方法使用经验

5、weekStart — 一周从哪一天开始

Integer类型 

 

默认值:0 

 

0(星期日)到6(星期六) 

 

例如:$("#demo").datetimepicker({        weekStart: 3        });

datetimepicker日期时间控件的使用方法使用经验

6、startDate — 开始时间

Date类型 

 

默认值:开始时间

之前的日期都不能选择,这个时间之后的时间才能选择。

咱们做一个常用的Demo,就是只能选现在之后的时间:

例如:var date = new Date();$("#demo").datetimepicker({        startDate: date        });

datetimepicker日期时间控件的使用方法使用经验

7、endDate— 结束时间

Date类型 

 

默认值:结束时间

这个时间后面的不能再选择。 

 

用法同上,不再赘述。

3.5 daysOfWeekDisabled — 一周的周几不能选

String, Array类型 

 

默认值:”, []

0(星期日)到6(星期六) 

 

可以有多个。

例如:$("#demo").datetimepicker({        daysOfWeekDisabled: [0,4,6]        });

8、daysOfWeekDisabled — 一周的周几不能选

String, Array类型 

 

默认值:”, []

0(星期日)到6(星期六) 

 

可以有多个。

例如:

$("#demo").datetimepicker({        daysOfWeekDisabled: [0,4,6]        });

datetimepicker日期时间控件的使用方法使用经验

9、autoclose — 选完时间后是否自动关闭

Boolean类型 

 

默认值:false

当选择一个日期之后是否立即关闭此日期时间选择器。

startView — 选完时间首先显示的视图

Number, String类型 

 

默认值:2, ‘month’

日期时间选择器打开之后首先显示的视图

datetimepicker日期时间控件的使用方法使用经验

10、maxView — 最高能展示的时间

todayBtn — 当天日期按钮

todayHighlight — 当天日期高亮

keyboardNavigation — 方向键改变日期

language — 语言   默认值:’en’中文:’zh-CN’

minuteStep — 步进值

pickerPosition — 选择框位置

showMeridian — 是否显示上下午

initialDate — 初始化日期时间

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢