码迷,mamicode.com
首页 > Web开发 > 详细

jQuery UI Datepicker使用介绍

时间:2014-06-03 14:03:43      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:c   class   blog   code   java   a   

本博客使用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控件

1
$("#startdate").datepicker();

程序运行结果如下:bubuko.com,布布扣

4.jQuery UI Datepicker显示中文

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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‘]);
});
运行结果如下:bubuko.com,布布扣

Datepicker配置显示中文

作者微博 @bage88

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

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

jQuery UI Datepicker使用介绍,布布扣,bubuko.com

jQuery UI Datepicker使用介绍

标签:c   class   blog   code   java   a   

原文地址:http://www.cnblogs.com/liminjun88/p/3759694.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!