bootstrap-datetimepicker 的使用

最近项目的后台管理系统需要一个按时间查询的需求,前端需要一个日期的选择器,度娘之后选择了bootstrap-datetimepicker日期选择控件。
bootstrap日期时间选择器下载地址和文档

在使用的过程中主要遇到了两个问题

  1. 插件内容默认是英文没有中文
  2. 就是一个最基础的需求,开始的日期不能晚于结束的日期,结束的日期不能早于开始的日期。

首先解决第一个没有默认是英文的问题,修改文件中JS目录下的JS文件手动添加cn中文选项

bootstrap-datetimepicker 的使用_第1张图片

然后在初始化中language中配置cn

bootstrap-datetimepicker 的使用_第2张图片
var dates = $.fn.datetimepicker.dates = {  
   en: {  
     days:        ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],  
     daysShort:   ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
     daysMin:     ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],  
     months:      ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],  
     monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],  
     meridiem:    ['am', 'pm'],  
     suffix:      ['st', 'nd', 'rd', 'th'],  
     today:       'Today',  
     clear:       'Clear'  
   },  
   cn : {  
        days: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],  
        daysShort: ["日", "一", "二", "三", "四", "五", "六", "七"],  
        daysMin: ["日", "一", "二", "三", "四", "五", "六", "七"],  
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  
        meridiem:    ['am', 'pm'],  
        suffix:      ['st', 'nd', 'rd', 'th'],  
        today: "今天",  
        clear: "清除"  
   }  
 }; 

第二个问题就是日期选择的限制了,直接粘代码





    
    Document
    
    
    
    
    



    

NPM的配置,直接粘过去就好~

{
  "name": "kkkoko",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^3.3.5",
    "jquery": "^2.2.4",
  }
}

你可能感兴趣的:(bootstrap-datetimepicker 的使用)