jQuery 插件 timedropper datedropper 使用

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部分内容参考: 阿里云栖社区