2017年2月28日手记---bootstrap日期选择器

时间:2023-01-02 14:09:14

今天在写网页时需要用到时间选择器这个控件,这让我想起了<input/>自带的'date'类型,这也是个时间选择器,哈哈,秒写,结果发下这个东西IE不支持,好吧果断删除,现在有两条路给我选:1.自己写一个时间选择器(发现我没有这么叼)。2.去网上找插件,bootstrap正好有提供这个时间选择器控件而且很叼果断下载依赖包,而且很人性化的是依赖包里面还有案例,我参考着案例将需要的文件拉进自己的项目中:http://www.bootcss.com/p/bootstrap-datetimepicker/ 这个连接是bootstap时间选择器的下载包地址API也在这里,我很快就写好了代码,html代码我就不贴上去了(官网上有示例)我就贴个我JS的代码的,因为我今天重点回顾那个部分,好上代码:

        $('#datetimepickerStart').datetimepicker({
            format: "yyyy-mm-dd",//要输出的时间格式
            todayBtn: true,//today这个按钮是否显示
            language: 'ch',//语言格式
            autoclose: true,//选定一个日期后自动关闭选择器
            minView: "month"//最小/最后的View,就是最后一个View这行的意思是选完day后选项框不再显示,(个人理解就是month这个View是负责显示day的)
        });

这些代码都很简单,在我上面给的链接里的网站上都有,主要讲的是语言问题:我上面写到的语言这一属性中我用的是‘ch’,不错这个ch代表的是中文,这个不是它自带的而是我自己写的,我发现它那里提供了'en','de','br','es'就是没有'ch',这是很相信中国的程序员有能力自己写啊,所以,我果断自己写一个,我在想这个于有关语言的显示的肯定在js里面,所以我就去js 里找,后来果然被我找到了 ,我模仿他的实例自己写了一个,好吧,不想吹牛了上了代码睡觉去:

    ch: {
      days:        ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      daysShort:   ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      daysMin:     ['日', '一', '二', '三', '四', '五', '六', ''],
      months:      ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      monthsShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      meridiem:    ['上午', '下午'],
      suffix:      ['st', 'nd', 'rd', 'th'],
      today:       'Today',
      clear:       'Clear'
      }