本博客使用Markdown编辑器编写

在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件。jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要。本文就主要讨论jQuery UI Datepicker的使用,和中文本地化配置。

1.jQuery UI介绍

jQuery UI是一套基于jQuery控件和动画效果Javascript类库。可以用来构建交互式的互联网应用程序。最新版本1.10.4.基于jQuery 1.6+

jQuery UI官方网站

2.jQuery UI Datepicker介绍

Datapicker是jQuery UI里面控件的一个控件。主要是给用户呈现日历,方便用户选择日期和时间。

Datepicker介绍

3.jQuery UI Datepciker示例

  • 步骤1.下载最新版jQuery UI.
  • 步骤2 引入下面三个文件,他们分别是:

    jquery.js

    jquery-ui.js

    jquery-ui.css
  • 步骤3 编写代码,下面配置一个很简单的datepicker控件
    $("#startdate").datepicker();

程序运行结果如下:

4.jQuery UI Datepicker显示中文

可以datepicker控件显示出来了,但是全部是英文。所以我们需要对它进行修改,让它默认显示为中文。比如周一到周日显示为:“一、二、三、四、五、六、日”这样的汉字。在使用datepicker之前,使用下面代码,将datepicker的语言设置为中文就好了。代码如下:

    jQuery(function($){
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六',
'七','八','九','十','十一','十二'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy-mm-dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
});

运行结果如下:

Datepicker配置显示中文

作者微博 @bage88

下面是一个可以使用新窗口打开的链接:

<a href="http://www.cnblogs.com" target="_blank">博客园</a>

博客园

jQuery UI Datepicker使用介绍的更多相关文章

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

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

  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

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

  5. [转]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 ...

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

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

  7. Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

    通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法 ...

  8. jQuery UI Datepicker

    http://www.runoob.com/try/try.php?filename=jqueryui-example-datepicker-dropdown-month-year <!doct ...

  9. jquery ui datepicker中文显示

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

随机推荐

  1. LeetCode Logger Rate Limiter

    原题链接在这里:https://leetcode.com/problems/logger-rate-limiter/ 题目: Design a logger system that receive s ...

  2. sass中中文注释报错

    最近项目中用到了sass来编译css,但是scss代码中写了中文注释后编译报错, 经过查找文档和资料,终于找到了解决办法,即在scss文件顶部加上@charset "utf-8"; ...

  3. Android中SQLite下 Cursor的使用。

    引自博客大神一篇文   地址:  http://blog.sina.com.cn/s/blog_15e2abdd90102wcdu.html rawQuery()方法用于执行select语句.  /* ...

  4. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  5. Multi-Model多模数据库引擎设计与实现

    如今,随着业务“互联网化”和“智能化”的发展以及架构 “微服务”和“云化”的发展,应用系统对数据的存储管理提出了新的标准和要求,数据的多样性成为了数据库平台面临的一大挑战,数据库领域也催生了一种新的主 ...

  6. 如何学习DeepLearning

    多年来,科学家们为了搞清楚神经网络的运行机制,进行了无数次实验.但关于神经网络的内在运行方式,目前还没有系统性的理论,没有具体的路线可以指引你获得更好的性能.简单地下载开源工具包直接使用并不能跑出很棒 ...

  7. leetcode记录

    2019 1月31: 141交叉链表, 2月: 2/1: 160环形链表 ,              思路记得,但是指针里面逻辑搞错,这里不是用快慢指针而是同时的指针.:复习了141题还是有问题,把 ...

  8. No MaterialLocalizations found (Flutter)

    在显示SimpleDialog时候程序报错 No MaterialLocalizations found 没有找到 MaterialLocalizations 搜索找到原因 runApp 需要先调用 ...

  9. 20155326 2016-2017-2 《Java程序设计》第九周学习总结

    20155326 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 1.撰写应用程序是利用通信协议对数据库进行指令交换,以进行数据的增删查找. 2.JDBC目的 ...

  10. 最短路径——Dijkstra算法和Floyd算法

    Dijkstra算法概述 Dijkstra算法是由荷兰计算机科学家狄克斯特拉(Dijkstra)于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图(无 ...