出自：http://www.aimks.com/method-to-display-the-jquery-ui-datepicker-chinese.html

Query UI Datepicker这个用于日期显示很方便而且提供了多种样式，可以从jQuery UI中选择喜欢的样式和jQuery UI组件随意下载js库。

如果只是使用datepicker那么选择时之选UI Core和Widgets中的Datepicker，然后选择喜欢的主题，选择版本，下载即可。

不过下载的jQuery UI库中是没有中文的，我们可以将如下js代码放到一个js文件中，然后在文件中引用即可：

  1. jQuery(function($){
  2.      $.datepicker.regional['zh-CN'] = {
  3.         clearText: '清除',
  4.         clearStatus: '清除已选日期',
  5.         closeText: '关闭',
  6.         closeStatus: '不改变当前选择',
  7.         prevText: '< 上月',
  8.         prevStatus: '显示上月',
  9.         prevBigText: '<<',
  10.         prevBigStatus: '显示上一年',
  11.         nextText: '下月>',
  12.         nextStatus: '显示下月',
  13.         nextBigText: '>>',
  14.         nextBigStatus: '显示下一年',
  15.         currentText: '今天',
  16.         currentStatus: '显示本月',
  17.         monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
  18.         monthNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
  19.         monthStatus: '选择月份',
  20.         yearStatus: '选择年份',
  21.         weekHeader: '周',
  22.         weekStatus: '年内周次',
  23.         dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
  24.         dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
  25.         dayNamesMin: ['日','一','二','三','四','五','六'],
  26.         dayStatus: '设置 DD 为一周起始',
  27.         dateStatus: '选择 m月 d日, DD',
  28.         dateFormat: 'yy-mm-dd',
  29.         firstDay: 1,
  30.         initStatus: '请选择日期',
  31.         isRTL: false};
  32.         $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
  33.     });

页面调用

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>jQuery UI 日期选择器（Datepicker） - 其他月份的日期</title>
  6.   <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  7.   <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  8.   <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  9.   <link rel="stylesheet" href="jqueryui/style.css">
  10.   <script>
  11.       jQuery(function($){
  12.           $.datepicker.regional['zh-CN'] = {
  13.               clearText: '清除',
  14.               clearStatus: '清除已选日期',
  15.               closeText: '关闭',
  16.               closeStatus: '不改变当前选择',
  17.               prevText: '< 上月',
  18.               prevStatus: '显示上月',
  19.               prevBigText: '<<',
  20.               prevBigStatus: '显示上一年',
  21.               nextText: '下月>',
  22.               nextStatus: '显示下月',
  23.               nextBigText: '>>',
  24.               nextBigStatus: '显示下一年',
  25.               currentText: '今天',
  26.               currentStatus: '显示本月',
  27.               monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
  28.               monthNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
  29.               monthStatus: '选择月份',
  30.               yearStatus: '选择年份',
  31.               weekHeader: '周',
  32.               weekStatus: '年内周次',
  33.               dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
  34.               dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
  35.               dayNamesMin: ['日','一','二','三','四','五','六'],
  36.               dayStatus: '设置 DD 为一周起始',
  37.               dateStatus: '选择 m月 d日, DD',
  38.               dateFormat: 'yy-mm-dd',
  39.               firstDay: 1,
  40.               initStatus: '请选择日期',
  41.               isRTL: false};
  42.           $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
  43.       });
  44.       $(function() {
  45.           $( "#datepicker" ).datepicker({
  46.               showOtherMonths: true,
  47.               selectOtherMonths: true,
  48.               showButtonPanel: true,
  49.               showOn: "both",
  50.               buttonImageOnly: true,
  51.               buttonImage: "calendar.gif",
  52.               buttonText: "",
  53.               changeMonth: true,
  54.               changeYear: true
  55.           });
  56.       });
  57.   </script>
  58. </head>
  59. <body>
  60.  
  61. <p>日期：<input type="text" id="datepicker"></p>
  62.  
  63. </body>
  64. </html>

结果：

JQuery UI Datepicker中文显示的方法的更多相关文章

  1. jquery ui datepicker中文显示

    $.datepicker.regional['zh-CN'] = { closeText: '关闭', prevText: '<上月', nextText: '下月>', currentT ...

  2. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  3. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  4. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  5. 坑爹的jquery ui datepicker

    1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...

  6. jQuery UI datepicker z-index默认为1 怎么处理

    最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...

  7. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  8. [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4

    本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...

  9. jQuery ui datepicker 日历转中文

    做个笔记,以后详解 jQuery(function($){ $.datepicker.regional['zh-CN'] = { closeText: '关闭', prevText: '<上月' ...

随机推荐

  1. Lucene快速入门

    1. 什么是lucene lucene是Apache的一个全文检索工具,使用lucene能快速实现全文检索功能.Lucene是一个工具包,你可以调用它的函数, 但它不能独立运行,不单独对外提供服务. ...

  2. Nodejs 实用工具集笔记

    前言 工具列表 supervisor 安装 使用 node-inspector 安装 使用 SuperAgent 安装 使用 教程 cheerio 安装 使用 教程 总结 前言 学了Nodejs一天了 ...

  3. MySQL 进入 导入

    命令行进入时 不能用 ‘;’ 结尾

  4. 你所不知道的 Java 之 HashCode

    之所以写HashCode,是因为平时我们总听到它.但你真的了解hashcode吗?它会在哪里使用?它应该怎样写? 相信阅读完本文,能让你看到不一样的hashcode. 使用hashcode的目的在于: ...

  5. 同一局域网环境下的arp欺骗和中间人攻击（mac）

    最近读了一篇有关arp欺骗和中间人攻击的文章,于是乎就想着自己实现一下,顺便验证下微信在回话劫持后的安全性. 1.本机环境 Macbook Air:OS X 10.11 El Captain 2.推荐 ...

  6. echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

    一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 ...

  7. asp.net core microservices 架构之eureka服务发现

    一 简介 微服务将需多的功能拆分为许多的轻量级的子应用,这些子应用相互调度.好处就是轻量级,完全符合了敏捷开发的精神.我们知道ut(单元测试),不仅仅提高我们的程序的健壮性,而且可以强制将类和方法的设 ...

  8. 剑指offer-第六章面试中的各项能力（扑克牌中的顺子）

    //扑克牌的顺子 //题目:在一个扑克牌中随机的抽5张牌,看是不是顺子.大小王为0,A为1,J为11,Q为12,K为13.其他数字为自己本身. //思路:大小王可以代表任意一个数字,因此我们在看是不是 ...

  9. UIActivityViewController

    //UIImage *imageToShare = [UIImage imageNamed:@"iosshare.jpg"]; //NSURL *urlToShare = [NSU ...

  10. sublime text 3设置浏览器快捷键

    一.设置默认浏览器 1,打开sublime 依次选择 tools > build system > new build system... 2,选择你喜欢的浏览器,右键 > 属性 把 ...