当前位置:主页 > JavsScript库 > 日期 / 时间 >

Material Inspired日期和时间选择器 – simplePicker
栏目分类:日期 / 时间   发布日期:2021-10-22   浏览次数:

simplePicker 是一个原生 JavaScript 插件,用于创建受 Material Design 启发的日期选择器,并集成了时间选择器。

使用:

安装 simplePicker 并将其导入到您的项目中。

# NPM
$ npm install simplepicker --save
// ES 6
import SimplePicker from 'simplepicker';
 
// CommonJS:
const SimplePicker = require('simplepicker');

或者直接在页面中包含以下 JS 和 CSS 文件。

<link rel="stylesheet" href="dist/simplepicker.css">
<script src="dist/simplepicker.js"></script>

创建一个新的日期选择器并指定日期选择器应附加到的目标容器(默认值:body)。

let myPicker = new SimplePicker(el);

打开/关闭日期选择器。

myPicker.open()
myPicker.close()

设置日期选择器的 z-index 属性。

let myPicker = new SimplePicker(el,{
    zIndex: 10
});

重置日期选择器。

myPicker.reset(date)

禁用/启用时间选择。

let myPicker = new SimplePicker(el,{
    disableTimeSection: false
});
 
// 或
myPicker.disableTimeSection()
myPicker.enableTimeSection()

事件处理程序可用。

myPicker.on('submit', function(date, readableDate){
  // ...
})
 
myPicker.on('close', function(date){
  // ...
})

官方网站:https://github.com/priyank-p/simplepicker

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库