• 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.
  • 相关阅读:
    vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
    vue-router 报错、:Avoided redundant navigation to current location 错误、路由重复
    微信小程序支付、小程序支付功能、小程序支付方法、微信小程序支付方法
    微信小程序热更新,小程序提示版本更新,版本迭代,强制更新,微信小程序版本迭代
    微信小程序动态修改title,动态配置title,动态配置头部,微信小程序动态配置头部
    响应式布局rem、rem方法封装、移动端响应式布局
    jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
    js获取url并截取相应的字段,js解决url获取中文字段乱码问题
    微信小程序接口封装、原生接口封装、request、promise封装
    20193327《Python程序设计》实验报告三
  • 原文地址:https://www.cnblogs.com/OnlyCT/p/6640338.html
Copyright © 2020-2023  润新知