日期控件 datetimepicker

最新推荐文章于 2025-11-24 16:35:25 发布

原创最新推荐文章于 2025-11-24 16:35:25 发布 · 988 阅读

1 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用bootstrap-datetimepicker.js在项目中实现日期选择功能，包括设置语言、日期格式等，并提供了解决非法日期输入导致用户体验不佳的方法。

项目中需要用到日期控件时，可以选择使用 bootstrap-datetimepicker.js。

使用方法：

<input type="text"   id="triggerTimeAppoint" />

$('#triggerTimeAppoint').datetimepicker({
    minView: "month", //不选择时间
    language: 'zh',                 // 语言选择
    format: 'yyyy-mm-dd',  // 选择格式
    todayBtn: true,
    autoclose: true
})

具体的详细属性可以看官方的文档：https://www.bootcss.com/p/bootstrap-datetimepicker/

该控件如果用户自己输入日期且输入的日期不合法的话，会自动跳转到1899年。这个体验感很不好，所以可以有以下两种办法：

1 将input改为readonly，禁止用户输入，只允许选择

2 修改bootstrap-datetimepicker.js，将

date = new Date(0, 0, 0, 0, 0, 0, 0) 替换为date = new Date()即可。因为该控件最早支持到1899年。

另附上使用的js与css下载连接：

http://118.89.225.76:8083/files/bootstrap/bootstrap.min.js

http://118.89.225.76:8083/files/bootstrap/bootstrap.css

http://118.89.225.76:8083/files/datetimepicker/bootstrap-datetimepicker.min.css

http://118.89.225.76:8083/files/datetimepicker/bootstrap-datetimepicker.fr.js

http://118.89.225.76:8083/files/datetimepicker/bootstrap-datetimepicker.js

http://118.89.225.76:8083/files/datetimepicker/bootstrap-datetimepicker.zh-CN.js

http://118.89.225.76:8083/files/datetimepicker/bootstrap-datetimepicker.min.js