Materialize datepicker时间选择器详解.Material Design风格的时间选择器
最近入了Materializecss的坑，发现有点不能自拔了.这篇文章就教大家一个materialize design风格的时间选择器。适用于web端和手机端哦。
0 还是给大家简单介绍一下Materializecss
Materialize由谷歌创建和设计的 Material Design（材料设计）是一种设计语言，结合成功的设计的经典原则以及创新科技。谷歌的目标是开发一个设计系统，让所有的产品在任何平台上拥有统一的用户体验。
Materialize 是一个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作，为您提供默认的样式，结合了您的自定义组件。此外，他们还改进动画和过渡，为开发人员提供流畅的体验。
敲黑板 ，简单的说就是google公司开发的一套类似bootstrap的前端框架
1 先给大家看一下官网的例子。
引入css，js，jquery就不说了。
html代码
<input type="date" class="datepicker">
js代码
//初始化，月份:下拉可选，年份:下拉可选15年
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
来看一下效果图.
哎呀， 没有中文，是不是看的很不舒服。
2 来来来，叫你怎么设置中文，下面演示一下带中文的日期选择器。
html代码
<input type="date" class="datepicker">
js代码
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15,// Creates a dropdown of 15 years to control year
format: 'yyyy/mm/dd',
weekdaysLetter: ['日', '一', '二', '三', '四', '五', '六'],
today: '今天',
clear: '清除',
close: '关闭',
monthsFull: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthsShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekdaysFull: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
});
参数说明:
在datepicker初始化时，根据需要来设置中文选项：
主要包括：
日期格式 ---- format：‘yyyy/mm/dd’;
周一到周日 ---- weekdaysLetter
今天 ---- today
清除 ---- clear
关闭 ---- close
下拉月份设置 ---- monthsFull
头部月份设置 ---- monthsShort
头部周设置 ---- weekdaysFull
效果图
这下有中文了，看起来顺眼多了，但是没有日期( ⊙ o ⊙ )啊！
难道我们要自己手写一下时间选择器么？NO！NO！NO！
其实除了datepicker的插件还有一个timepicker插件 timepicker传送门
少年可以网上找插件啊.一个机智的微笑
Bootstrap谷歌Material Design风格日期时间选择器 传送门
这里安利一下jquery之家的插件还是蛮好用的，不仅有代码，还有详细参数的说明.比起其他的网站还是用心多了。
拿到示例，我们找到Min Date set这个示例.(因为是要做一个只能选择当前时间之后的时间选择器)。
稍微改造一下
js代码
//format:格式化日期格式
//lang:选择中文--zh-cn
//cancelText:取消文本
//okText:确定文本
//minDate:最小时间,我们设置为当前时间new Date()
$('#min-date').bootstrapMaterialDatePicker({
format : 'YYYY/MM/DD HH:mm',
lang : 'zh-cn',
cancelText : '取消',
okText: '确定',
minDate : new Date()
});
效果图如下
这样我们就得到一个完整的时间选择器啦。
over~
