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~