出自：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文件中，然后在文件中引用即可：

jQuery(function($){

     $.datepicker.regional['zh-CN'] = {

        clearText: '清除',

        clearStatus: '清除已选日期',

        closeText: '关闭',

        closeStatus: '不改变当前选择',

        prevText: '< 上月',

        prevStatus: '显示上月',

        prevBigText: '<<',

        prevBigStatus: '显示上一年',

        nextText: '下月>',

        nextStatus: '显示下月',

        nextBigText: '>>',

        nextBigStatus: '显示下一年',

        currentText: '今天',

        currentStatus: '显示本月',

        monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],

        monthNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],

        monthStatus: '选择月份',

        yearStatus: '选择年份',

        weekHeader: '周',

        weekStatus: '年内周次',

        dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],

        dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],

        dayNamesMin: ['日','一','二','三','四','五','六'],

        dayStatus: '设置 DD 为一周起始',

        dateStatus: '选择 m月 d日, DD',

        dateFormat: 'yy-mm-dd',

        firstDay: 1,

        initStatus: '请选择日期',

        isRTL: false};

        $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

    });

页面调用

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI 日期选择器（Datepicker） - 其他月份的日期</title>

  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">

  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="jqueryui/style.css">

  <script>

      jQuery(function($){

          $.datepicker.regional['zh-CN'] = {

              clearText: '清除',

              clearStatus: '清除已选日期',

              closeText: '关闭',

              closeStatus: '不改变当前选择',

              prevText: '< 上月',

              prevStatus: '显示上月',

              prevBigText: '<<',

              prevBigStatus: '显示上一年',

              nextText: '下月>',

              nextStatus: '显示下月',

              nextBigText: '>>',

              nextBigStatus: '显示下一年',

              currentText: '今天',

              currentStatus: '显示本月',

              monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],

              monthNamesShort: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],

              monthStatus: '选择月份',

              yearStatus: '选择年份',

              weekHeader: '周',

              weekStatus: '年内周次',

              dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],

              dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],

              dayNamesMin: ['日','一','二','三','四','五','六'],

              dayStatus: '设置 DD 为一周起始',

              dateStatus: '选择 m月 d日, DD',

              dateFormat: 'yy-mm-dd',

              firstDay: 1,

              initStatus: '请选择日期',

              isRTL: false};

          $.datepicker.setDefaults($.datepicker.regional['zh-CN']);

      });

      $(function() {

          $( "#datepicker" ).datepicker({

              showOtherMonths: true,

              selectOtherMonths: true,

              showButtonPanel: true,

              showOn: "both",

              buttonImageOnly: true,

              buttonImage: "calendar.gif",

              buttonText: "",

              changeMonth: true,

              changeYear: true

          });

      });

  </script>

</head>

<body>

<p>日期：<input type="text" id="datepicker"></p>

</body>

</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. Java IO流读写文件的几个注意点

     平时写IO相关代码机会挺少的,但却都知道使用BufferedXXXX来读写效率高,没想到里面还有这么多陷阱,这两天突然被其中一个陷阱折腾一下:读一个文件,然后写到另外一个文件,前后两个文件居然不 ...

  2. lua基础---函数

    Lua的函数功能很强大,保留了C语言的一些基本的特性,但是也有C语言没有的特性,比如,lua可以在一个函数返回多个值,我们来看看下面这个案例: 解释运行: lua test5.lua --定义一个函数 ...

  3. HWOJ-合唱队

    计算最少出列多少位同学,使得剩下的同学排成合唱队形 说明: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依 ...

  4. 数据结构（栈&堆 ）

    在计算机领域,堆栈是一个不容忽视的概念,堆栈是两种数据结构.堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top))对数据项进行插入和删除.在单片机应用中,堆栈是个特殊的存储区,主要功能 ...

  5. nginx time_wait 较多优化

    1. 查看命令   netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}'   结果 ESTABLISHED 22 F ...

  6. ubuntu下网卡eth1如何修改为eth0

    正常来说,Linux在识别网卡时第一张会是eth0,第二张才是eth1.有时候我们使用虚拟机克隆技术后网卡的信息就会改变,新克隆出来的虚拟主机网卡名字可能变为eth1.无论我们怎么修改都无法改变,这就 ...

  7. Linux Samba目录服务搭建与Java客户端访问

    前言: 本文比较简略,只求快速入门,若要了解详情,推荐一篇文章:http://www.cnblogs.com/mchina/archive/2012/12/18/2816717.html 1,安装sa ...

  8. php redis 命令合集

    1.https://www.cnblogs.com/aipiaoborensheng/p/5666005.html 2.https://www.cnblogs.com/doanddo/p/734908 ...

  9. 【转】配置Jmeter的自定义参数

    配置Jmeter的自定义参数 User Defined Variables 在这个控件中,定义你所需要的参数,如 在对应的需要使用参数的位置,使用${host}替代. 应用场景: 当测试环境变化时,我 ...

  10. POJ 2823 Sliding Window（单调队列入门题）

      Sliding Window Time Limit: 12000MS   Memory Limit: 65536K Total Submissions: 67218   Accepted: 190 ...