datepicker是一个基于jQuery的日期选择器插件，它支持范围选择、最大和最小设置、时间格式自由转换、UI美观、易于使用，参考了element-ui datePicker的设计。

它不依赖于其他库，只需要引入两个文件就可以使用。它还提供了一些自定义属性和事件回调函数，让你可以根据你的需求来调整日期选择器的功能和样式。

它的特点有：

支持时分秒年月日范围选择

最大最小值限制

限制开始结束时间间隔最大值

快捷选项简易配置

支持只选年月，只选年

首先你需要在页面中引入你要的文件：

// picker css（加载了fonts,具体看scss文件夹） <link rel="stylesheet" href="css/datepicker.css"> // rely on plugins <script src="js/plugins/jquery.js"></script> <script src="js/plugins/moment.min.js"></script> // picker js <script src="js/datepicker.all.min.js"></script>

然后再页面中就可以使用了：

// 年月日单个(J-datepicker-day对应html里的input父元素div) $('.J-datepicker-day').datePicker({ hasShortcut: true, format:'YYYY-MM-DD', shortcutOptions: [{ name: '今天', day: '0' name: '昨天', day: '-1' name: '一周前', day: '-7'

你也可以使用日期范围：

本文版权属于jQuery之家，转载请注明出处： http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/202303105926.html

友情链接： jQuery之家 | 自助建站 | WEB前端开发 | 海玉’s Blog | jQuery插件

jQuery之家-htmleaf.com自由分享各种 jQuery 、 HTML5 、 CSS3等前端开发插件。