开发者社区> liminjun88> 正文

jQuery UI Datepicker使用介绍

简介:
+关注继续查看

本博客使用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();

    程序运行结果如下:
    291729051505348.png

    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']);
        });

    运行结果如下:
    291730464639630.png


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【前端】使用jQuery封装一套UI组件 - 级联选择器组件
本篇文章来讲解下级联选择器组件 级联选择器,在实际项目中也是比较常用的组件,比如:省市区三级关联,上下级联动等 最后面会附上全部代码
173 0
【前端】使用jQuery封装一套UI组件 - 是和否滑动切换组件
本篇文章来讲解下是和否的滑动切换组件 切换滑动组件,使用的场景实际上就是一个开和关的场景,一般有是和否,开和关,禁用和启用等等,只需要设置0和1即可
22 0
【前端】使用jQuery封装一套UI组件 - 可编辑下拉框组件
下拉框也是比较常用的组件,对应原生的下拉标签就是select 本篇文章就来讲讲可编辑下拉框组件的封装过程
63 0
swift UI专项训练28 DatePicker日期老虎机
    如果你设置过iPhone中的日期,那么你对日期老虎机一定不陌生。它的基类是UIDatePicker。
1003 0
jQuery UI Datepicker中文显示
jqueryuifunction [javascript] view plaincopy jQuery UI Datepicker这个用于日期显示很方便而且提供了多种样式,可以从jQuery UI中选择喜欢的样式和jQuery UI组件随意下载js库,如果只是使用datepicker那么选择时之选UI Core和Widgets中的Datepicker,然后选择喜欢的主题,选择版本,下载即可。
1082 0
jquery UI datepicker时间控件的使用
参考: http://api.jqueryui.com/datepicker/#method-show 英文 http://www.helloweba.com/view-blog-168.html  中文 http://jqueryui.
994 0
jquery ui datepicker 只能选今天以后的日期
 $("input[name=begintime],input[name=endtime],input[name=Arrivedate]").datepicker({dateFormat:"yy-mm-dd",minDate: new Date()});
1156 0
SAP 电商云 Spartacus UI userID 即邮件地址中的加号问题
SAP 电商云 Spartacus UI userID 即邮件地址中的加号问题
35 0
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
SAP 电商云 Spartacus UI 的 Product Category Navigation UI 实现
37 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载
使用TensorFlow搭建智能开发系统自劢生成App UI代码
立即下载