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();

程序运行结果如下:

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

vue非父子通讯(BUS/总线机制/订阅者模式)

前面我们讲述的是父子间的数据通讯,那么这里就来介绍非父子间通讯!之前的发布的《一天带你入门到放弃vue.js(二)》中介绍了使用Event调度器来实现传递,这里...

34410
来自专栏更流畅、简洁的软件开发方式

分享一个基于jQuery的锁定表格行列的js脚本。

  网上也有很多锁定行列的方法,一个是使用css,另一个就是专门的控件附带有锁定的功能。css的大多数锁定行,而不能锁定列。好像看过园子里的司徒正美,写过一个用...

31960
来自专栏张善友的专栏

[翻译]开发Silverlight 2.0的自定义控件

原文:Developing a Custom Control for Silverlight 2.0 译者:张善友 Download MediaButto...

22790
来自专栏WindCoder

Android学习笔记-控件初体验

python为自己自学的,现仍处于初级阶段,这学期开启的是javaEE和Android开发,所以今后可能会同时出现这些方面的总结内容。

8810
来自专栏.Net移动开发

Smobiler 4.4 更新预告 Part 2(Smobiler能让你在Visual Studio上开发APP)

Hello Everybody,在Smobiler 4.4中,也为大家带来了新增功能和插件(重点,敲黑板)。

13830
来自专栏超然的博客

link 与 @import之对比

页面中使用CSS的方式主要有3种:行内添加定义style属性值,页面头部内嵌调用和外面链接调用,其中外面引用有两种:link和@import。外部引用CSS两种...

9710
来自专栏Create Sun

【.net+jquery】绘制自定义表单(含源码)

前言   两年前的时候就想做一个类似的功能,当时思路大家都讨论好了,诸多原因最终还是夭折了。没想到两年多后再这有重新提出要写一个绘制表单的功能。对此也是有点小激...

1.3K80
来自专栏hotqin888的专栏

小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

11510
来自专栏林德熙的博客

wpf 如何使用 Magick.NET 播放 gif 图片 安装 Magick.NET解析 gif播放 gif

最近在做 gif 播放,发现 gif 播放需要很多内存,于是就使用 Magick.NET 播放,但是这个方式也需要很多的内存。播放一张 uwp 萤火虫 需要 ...

8620
来自专栏菩提树下的杨过

silverlight数据绑定模式TwoWay,OneWay,OneTime的研究

asp.net开发中,数据绑定是一个很简单的概念,控件与数据绑定后,控件可以自动把数据按一定的形式显示出来。(当然控件上的值改变后,可以通过提交页面表单,同时后...

24160

扫码关注云+社区

领取腾讯云代金券