使用bootstrap框架日期组件

一、首先，bootstrap是支持日期组件的。在网上找了很多方法尝试，失败了很多次。最终一个问题一个问题的解决，总结如下。

1.      注意bootstrap.datetimepicker.js等文件的版本，版本不同，使用方式也不同。

2.      Firefox浏览器对js的支持不同，需要修改bootstrap-datetimepicker.js文件中的

this.defaultTimeZone = (new Date).toString().split('(')[1].slice(0, -1);

改为：

this.defaultTimeZone='GMT '+(new Date()).getTimezoneOffset()/60;

否则在火狐中运行，按F12开发者模式调试窗口可以看到JS的报错。

         这里给出网上给出的案例代码：

    
    
    



	

	    

	        

	            
Test
	            

	                DateTime Picking
	                

	                    
	                    
						
	                
					

	            
				

	                Date Picking
	                

	                    
	                    
						
	                
					

	            
				

	                Time Picking
	                

	                    
	                    
						
	                
					

	            
	        
	    
	

	
	
	
	
	
 	
		

二、日期默认是英文的，想要使用中文版的有两种办法。

1、 修改bootstrap-datetimepicker.js文件中的下面程序片段：

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'
    }
  };
//修改为：


$.fn.datetimepicker.dates['zh'] = {
				days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
				daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
				daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
				months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
				monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
				meridiem:    ["上午", "下午"],
				//suffix:      ["st", "nd", "rd", "th"],
				today:       "今天"
		};

然后在JS中指定语言为zh就可以使用中文。如下所示：

$(function(){
		$('.datepicker').datetimepicker({
		    language:  'zh',
		    weekStart: 1,
		    todayBtn:  1,
			autoclose: 1,
			todayHighlight: 1,
			startView: 2,
			forceParse: 0,
		    showMeridian: 1
		}).on('changeDate', function (ev) {
		    $(this).datetimepicker('hide');
		});
	});

2．引用bootstrap-datetimepicker.zh-CN.js文件

         JS中设为：

language: 'zh-CN',

        即可