美观强大的日期时间选择器插件flatpicker.pdf

美观强⼤的⽇期时间选择器插件flatpicker 查看演⽰ website 下载地址：https://chmln .github .io/flatpickr/ 插件描述 ：jQuery日期时间选择器插件flatpicker ，功能强大 ， 多种主题 ，多国语言支持中文。 flatpickr功能强⼤的⽇期时间选择器插件 flatpickr日期时间选择器支持移动手机 ，提供多种内置的主题效果 ，并且 提供对中文的支持。它的特点还 ： 使用SVG作为界面的图标。 兼容jQuery。 支持对各种日期格式的解析。 轻量级 ，高性能 ，压缩后的版本仅6K大小。 对手机原生日期格式的支持。 下图说明了使用jQuery UI、Bootstrap、packadate.js和flatpickr拉齐制 作一个日期时间选择器时 ，所需要的文件尺寸大小 ： 使⽤⽅法： 在页面中引入flatpicker.css和flatpicker.js文件。 link rel=stylesheet type=text/css href=/path/to/flatpickr.css script src=/path/to/flatpickr.js/script HTML示例 ： input id=myID 初始化插件 ： document.getElements yClassName(myClass).flatpickr({..config}); document.getElement yId(myID).flatpickr(); // 两种js初始化⽅法 $(.calendar).flatpickr(); // jQuery初始化⽅法 配置参数 在配置参数中 ，所 的类型为string或boolean的参数都可以通过data-属 性在HTML标签中进行设置。例如 ：data-min-date、data-default- date、data-default-date等。 参数 类型 默认值 描述 altFormat string F j, Y altInput的日期格式。 altInput Boolean false 是否使用某种用户友好的方式 来显示日期时间。 altInputCla String 添加到input上的自定义class ss 类。例如bootstrap用户可能 需要添加一个form-control c lass。 allowInput boolean false 是否允许用户直接在输入框中 输入日期。 clickOpens boolean true 是否在点击输入框时打开日期 时间选择界面。如果你想通过 手动.open()方法来打开 ，该 选项设置为false。 dateForma string Y-m- 设置日期显示格式。 t d defaultD