bootstrap-datetimepicker使用中文

最新推荐文章于 2019-12-25 18:32:28 发布

原创最新推荐文章于 2019-12-25 18:32:28 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

jsp/js 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了如何将Bootstrap-datetimepicker控件的语言从默认的英文切换至中文，包括设置中文格式内容及在页面中创建时间控件时指定语言的过程。

bootstrap-datetimepicker控件的默认语言标记为en，可以在它们的脚本源码中看到：

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"
		}
	};

如果要显示为中文，首先要设置中文格式内容：

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

然后在页面中创建时间控件的时候指定"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');
		});
	});

效果如下：