jQuery
小插件 timedropper
datedropper
datedropper
datedropper 官网地址
GitHub 地址:最新版 3.0
GitHub 地址:老版本:
使用说明
1. datedropper
老版本
datedropper
老版本可以在调用的时候就初始化一些操作
使用方法
<link rel="stylesheet" href="../datedroper/1.0/datedropper.css">
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<script src="../datedroper/1.0/datedropper.js"></script>
<input type="text" id="pickdate" />
$("#pickdate").dateDropper({
'animate': true, // 展示动画效果,当设置为true时,选择器面板中的日期会做动画滚动到当前日期,默认是true。
'init_animation': 'bounce', // 点击弹出面板时的动画效果,有fadeIn(默认), bounce, dropDown三种效果。
'format': 'Y-m-d', // 格式化日期。
'lang': 'zh', // 语言,。
'maxYear': '2000', // 最大年份,默认当前年份。
'minYear': '1990', // 最小年份,默认1970。
// 'yearsRange': '150', // 年份范围,默认10年。
// dateDropper: // 还提供了皮肤样式的设置。
});
2. datedropper
3.0版本
datedropper
3.0版本是写在input
标签内
使用方法
<link rel="stylesheet" href="../datedroper/3.0/datedropper.css">
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<script src="../datedroper/3.0/datedropper.js"></script>
<input type="text" id="pickdate" data-fx="true" data-fx-mobile="true" data-format="Y-m-d" data-lang="zh" data-format="Y-m-d"/>
属性 | 说明 | 默认值 | 书写格式 |
---|---|---|---|
default-date | This option offers the possibility to set a starting date. Please note that you must follow this specific format (mm-dd-yyyy) to allow the matching to recognize month, day and year. | Default: CURRENT DATE | data-default-date=“11-13-2016” |
disabled-days | This option offers the possibility to set a string of disabled days. So, separete all days by comma and the picker will convert them into an array. Please note that you must follow this specific format (mm/dd/yyyy) to allow the matching to recognize month, day and year. | Default: false | data-disabled-days=“12/13/2016,12/14/2016,12/15/2016” |
format | The date format the picker will write on the selected input. | Default: “m-d-Y” | data-format=“F S, Y” |
fx | If set to true, the picker will run an initial state animation and all user changes are animated. | Default: true | data-fx=“false” |
fx-mobile | Animations could be very slow on some older smartphones. To prevent this, set this option to false to disable animations on any mobile viewport. | Default: true | data-fx-mobile=“true” |
init-set | This option changes the input value automatically, by default. Set to false to prevent it. | data-init-set=“false” | |
lang | Languages used for months and days of the week. | Default: en | data-lang=“it” |
large-mode | This option enables to switch the size of the picker by clicking on the icon at the bottom or clicking on the day block. | Default: false | data-large-mode=“true” |
large-default | If “data-large-mode” is set to true, this option shows the large view by default. | Default: false | data-large-default=“true” |
lock | This option sets the date limit based on the assigned variable. If you set to “from”, you can’t select a date earlier than the current date. Opposed to this behavior, if it’s set to “to”, you can not select a date after the current date. | Default: false | data-lock=“from” |
jump | It groups years based on the value set(multiple). This option is enabled when you click on the year block, to accellerate the transition between years. | Default: 10 | data-jump=“4” |
max-year | The highest year that the control will allow. | Default: CURRENT YEAR | data-max-year=“2030” |
min-year | The lowest year that the control will allow. | Default: 1970 | data-min-year=“1800” |
modal | If this option is set to true, the picker will be displayed centered, with a dark overlay in background. | Default: false | data-modal=“true” |
theme | Set the name of style that you have assigned on the stylesheet generated by the theme generator. | data-theme=“my-style” | |
translate-mode | If it’s set to true, you can change the language by clicking on the icon at the bottom. | Default: false | data-translate-mode=“true” |
timedropper
$("#time").timeDropper({
meridians: false, // 默认为 false
format: 'HH:mm'
})
format 说明
Value | Description | Result |
---|---|---|
H | 24-hour format non-padded number | 0-24 |
h | 12-hour format non-padded number | 43112 |
HH | 24-hour format padded number | 00-24 |
hh | 12-hour format padded number | 43112 |
m | Non-padded numeric minutes | 1-59 |
mm | padded numeric minutes | 01-59 |
a | lower case meridian | am-pm |
A | upper case meridian | AM-PM |
datedropper部分内容参考: 阿里云栖社区