jQuery UI Datepicker使用介绍
时间:2022-04-22
本文章向大家介绍jQuery UI Datepicker使用介绍,主要内容包括本博客使用Markdown编辑器编写、2.jQuery UI Datepicker介绍、3.jQuery UI Datepciker示例、4.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里面控件的一个控件。主要是给用户呈现日历,方便用户选择日期和时间。
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']);
});
运行结果如下:
下面是一个可以使用新窗口打开的链接:
<a href="http://www.cnblogs.com" target="_blank">博客园</a>
- MySQL高可用方案-PXC环境部署记录
- Redis主从复制下的工作原理梳理
- Linux系统下常用的数据备份方法
- K2 的Workspace 遭遇400 RequestLength 错误修复
- 从零开始学人工智能-Python·决策树(三)·节点
- .net程序员使用Oracle新手上路指南
- python的函数(二):作用域
- 在win2008 r2中安装windows phone 7开发工具
- TFS2008 + Windows2003 + Sql2005 安装注意事项
- 机器学习(五)——k-近邻算法进一步探究
- openstack上创建vm实例后,状态为ERROR问题解决
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境(5)--问题解决
- 全国首创!今天起,杭州“刷”的一下就能直接乘地铁
- 2018年前端技术趋势预览
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android编程实现自定义ImageView圆图功能的方法
- Android开启闪光灯的方法 Android打开手电筒功能
- Android 中ActionBar+fragment实现页面导航的实例
- Android编程之下拉菜单Spinner控件用法示例
- Android控件Tween动画(补间动画)实现方法示例
- Android顶部(toolbar)搜索框实现的实例详解
- Linux下tcpdump命令解析及使用详解
- react native中的聊天气泡及timer封装成的发送验证码倒计时
- 如何卸载linux自带openjdk并安装sun jdk
- Android中实现密码的隐藏和显示的示例
- CentOS8出现-bash:乱码问题及解决方法
- Android编程实现摄像头临摹效果的方法
- Android实现九宫格解锁的实例代码
- 详解Linux系统中虚拟设备文件的各种实用用法
- 适配android7.0获取文件的Uri的方法