jQuery UI Datepicker使用介绍

八哥

发布于 2018-01-18 16:02:46

1.7K0

发布于 2018-01-18 16:02:46

文章被收录于专栏：快乐八哥快乐八哥

本博客使用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配置显示中文

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2014-05-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery

markdown

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

jquery

markdown

登录后参与评论

0 条评论

热度