zoukankan      html  css  js  c++  java
  • JQuery UI Datepicker中文显示的方法

    出自: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>

    结果:

    What a meaningless sense if losing myself,though owning all of the world.
  • 相关阅读:
    防火墙透明模式
    HP管理工具System Management Homepage安装配置
    kbmmw 中JSON 中使用SQL 查询
    kbmmw 中JSON 操作入门
    第一个kbmmw for Linux 服务器
    kbmmw 5.02发布
    kbmmw 5.01 发布
    使用delphi 10.2 开发linux 上的Daemon
    使用unidac 在linux 上无驱动直接访问MS SQL SERVER
    使用delphi 10.2 开发linux 上的webservice
  • 原文地址:https://www.cnblogs.com/OnlyCT/p/6640338.html
Copyright © 2011-2022 走看看