Bootstrap日期插件中文实现


Bootstrap的相关JS和CSS直接跳过。

        <script type="text/javascript" src="static/js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="static/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="static/js/bootstrap-datetimepicker.min.js"></script>
        <script type="text/javascript" src="static/js/bootstrap-datetimepicker.zh-CN.js"></script>
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <link rel="stylesheet" href="static/css/bootstrap-datetimepicker.min.css">
        

 

首先定一个中文国际化的JS,如bootstrap-datetimepicker.zh-CN.js

/**
 * 中文-国际化
 * @param $
 */
(function($){
    $.fn.datetimepicker.dates['zh-CN'] = {
        days: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], 
        daysShort: ['周日','周一','周二','周三','周四','周五','周六'],
        daysMin: ['日','一','二','三','四','五','六'],
        months: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
        monthsShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
        today: '今天',
        suffix: [],
        meridiem: [],
        weekStart: 1,
        format: 'yyyy-mm-dd'
    };
}(jQuery));

然后初始化日期插件,中文的JS一定要在初始化之前,先引用再初始化

$(function() {
   //初始化日期插件
    $('.datepicker').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        minView: 2,
        forceParse: 0,
        pickerPosition:'top-right'//日期插件弹出的位置
    }); });

最后实现结果如果:

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM