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‘//日期插件弹出的位置    });
});

最后实现结果如果:

时间: 2024-11-24 21:09:49

Bootstrap日期插件中文实现的相关文章

bootstrap日期插件datetimepicker的简单使用

<!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" me

jquery ui bootstrap日期插件

http://blog.csdn.net/php_897721669/article/details/7404527 搜索“jquery ui日期插件怎么显示年份”? $("#datepicker").datepicker({ dateFormat:'yy-mm-dd', //更改时间显示模式 showAnim:"slide", //显示日历的效果slide.fadeIn.show等 changeMonth:true, //是否显示月份的下拉菜单,默认为false

bootstrap日期插件

<!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" me

(转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

(原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明 近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 

jQuery Mobile 移动开发中的日期插件Mobiscroll使用说明

近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

jquery-ui里日期插件的使用

HTML为 <input type="text" id="starttime" readonly /> <input type="text" id="endtime" readonly /> 设置readonly属性,则输入框不可写: 引入必要的js文件和css文件 <link rel="stylesheet" type="text/css" href=&q

MyEclipse6.5设置注释模板的日期为中文格式

/** * MyEclipse6.5设置注释模板的日期为中文格式 * --------------------------------------------------------------------------------------------------------------- * 相信大部分人都用过Eclipse/MyEclipse中的Code Templates功能,配置地址如下 * Windows-->Preferences-->Java-->Code Style--

H5个性三级联动日期插件(一)

1. 先看效果:如图 2.如果跟你的需求一样的话,那就抓紧down(当)起来吧! 首先你的页面可能需要很多的开发需求文件: jquery,mobiscroll 等js框架插件等 自己参照官方的demo改了一个简单的日常应用的日期滑动效果的插件: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="

解决laydate时间日期插件定位溢出

laydate是一款比较好用的网页时间日期插件,不过用起来有一些细节问题需要我们手动去解决!例如:laydate兼容bootstrap laydate弹出层默认对齐input左边框 但是当这个input比较靠页面右边的时候就会出现弹出层一部分溢出的问题 这就需要修改插件JS文件,使其能够判断是否溢出并修复定位 找到JS文件laydate.js 首先找到设置定位代码 a.style.left=e.left+(b?0:c.scroll(1))+"px" 将其修改为 var boxWidth