文档章节

JQuery日期插件datepicker的使用

Yemon
 Yemon
发布于 2016/05/17 10:33
字数 1334
阅读 13
收藏 0
点赞 2
评论 0

JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活。下面做一个使用日期插件datapicker的例子。 

1、下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以网站http://marcgrabanski.com/pages/code/jquery-ui-datepicker下载datepicker,包括ui.core.js和ui.datepicker.js。

2、在HTML中引用下载下来的js文件: 

 

[xhtml]  view plain  copy
  1.        <!-- 引入 jQuery -->  
  2. <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery-1.5.1.min.js" type="text/javascript"></mce:script>  
  3. <!--添加datepicker支持-->  
  4. <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>  
  5. <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>  

3.在HTML中引入默认样式表文件,这个文件在ui压缩包中。如果在官网下载,首页就有这个CSS文件下载,也可选择其他皮肤的CSS。

[xhtml]  view plain  copy
  1. <!--引入样式css-->  
  2. type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />  

4.在HTML中插入文本域,最好设置成只读,不接受用户的手动输入,防止格式混乱,以id标记好。

 

[xhtml]  view plain  copy
  1. <input type="text" id="selectDate" readonly="readonly"/>  

5.编写js代码,实现最终效果。

[xhtml]  view plain  copy
  1. $(document).ready(function() {     
  2.       $('#selectDate').datepicker();     
  3.   });  

效果如下图:

这里只是做了一个最基本的日期控件,我们还需要以中文显示,限制日期选择范围等需求,稍微修改js代码:

[javascript]  view plain  copy
  1. <mce:script type="text/javascript"><!--  
  2.     //等待dom元素加载完毕.  
  3.         $(function(){  
  4.             $("#selectDate").datepicker({//添加日期选择功能  
  5.             numberOfMonths:1,//显示几个月  
  6.             showButtonPanel:true,//是否显示按钮面板  
  7.             dateFormat: 'yy-mm-dd',//日期格式  
  8.             clearText:"清除",//清除日期的按钮名称  
  9.             closeText:"关闭",//关闭选择框的按钮名称  
  10.             yearSuffix: '年'//年的后缀  
  11.             showMonthAfterYear:true,//是否把月放在年的后面  
  12.             defaultDate:'2011-03-10',//默认日期  
  13.             minDate:'2011-03-05',//最小日期  
  14.             maxDate:'2011-03-20',//最大日期  
  15.             monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
  16.             dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  17.             dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
  18.             dayNamesMin: ['日','一','二','三','四','五','六'],  
  19.             onSelect: function(selectedDate) {//选择日期后执行的操作  
  20.                 alert(selectedDate);  
  21.             }  
  22.             });  
  23.         });  
  24.       
  25. // --></mce:script>  

效果如下:

这里基本上就满足我们使用的需要了。datepicker控件默认是英文的,可以在构造datepicker时通过monthNames、dayNames属性来指定月、日的中文显示值,但是每次使用是都配置这些属性不免太麻烦了,可以增加一个js文件将中文配置都放在里面,每次使用直接引用即可,这里放在jquery.ui.datepicker-zh-CN.js中,内容如下:

[javascript]  view plain  copy
  1. jQuery(function($){  
  2.     $.datepicker.regional['zh-CN'] = {  
  3.         closeText: '关闭',  
  4.         prevText: '<上月',  
  5.         nextText: '下月>',  
  6.         currentText: '今天',  
  7.         monthNames: ['一月','二月','三月','四月','五月','六月',  
  8.         '七月','八月','九月','十月','十一月','十二月'],  
  9.         monthNamesShort: ['一','二','三','四','五','六',  
  10.         '七','八','九','十','十一','十二'],  
  11.         dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  12.         dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
  13.         dayNamesMin: ['日','一','二','三','四','五','六'],  
  14.         weekHeader: '周',  
  15.         dateFormat: 'yy-mm-dd',  
  16.         firstDay: 1,  
  17.         isRTL: false,  
  18.         showMonthAfterYear: true,  
  19.         yearSuffix: '年'};  
  20.     $.datepicker.setDefaults($.datepicker.regional['zh-CN']);  
  21. });  

6.在页面中引入中文插件

[javascript]  view plain  copy
  1. <!-- 添加中文支持-->  
  2.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  

完整的页面代码如下:

 

[xhtml]  view plain  copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.   <TITLE>日期控件datepicker</TITLE>  
  6.       
  7.     <!-- 引入 jQuery -->  
  8.     <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script>  
  9.   
  10.     <!--添加datepicker支持-->  
  11.     <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>  
  12.     <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>  
  13.     <!-- 或者引入jquery ui包,其中也包含对datepicker的支持  
  14.     <mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>  
  15.     -->  
  16.   
  17.     <!--引入样式css-->  
  18.     <link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />  
  19.   
  20.     <!-- 添加中文支持-->  
  21.     <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>  
  22.   
  23.     <mce:script type="text/javascript"><!--  
  24.     //等待dom元素加载完毕.  
  25.         $(function(){  
  26.             $("#selectDate").datepicker({//添加日期选择功能  
  27.             numberOfMonths:1,//显示几个月  
  28.             showButtonPanel:true,//是否显示按钮面板  
  29.             dateFormat: 'yy-mm-dd',//日期格式  
  30.             clearText:"清除",//清除日期的按钮名称  
  31.             closeText:"关闭",//关闭选择框的按钮名称  
  32.             yearSuffix: '年', //年的后缀  
  33.             showMonthAfterYear:true,//是否把月放在年的后面  
  34.             defaultDate:'2011-03-10',//默认日期  
  35.             minDate:'2011-03-05',//最小日期  
  36.             maxDate:'2011-03-20',//最大日期  
  37.             //monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],  
  38.             //dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],  
  39.             //dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],  
  40.             //dayNamesMin: ['日','一','二','三','四','五','六'],  
  41.             onSelect: function(selectedDate) {//选择日期后执行的操作  
  42.                 alert(selectedDate);  
  43.             }  
  44.             });  
  45.         });  
  46.       
  47. // --></mce:script>  
  48.  </HEAD>  
  49.  <BODY>  
  50.   <input type="text" id="selectDate" readonly="readonly"/>  
  51.  </BODY>  
  52. </HTML>  

 

注意:由于jquery datepicker首页http://marcgrabanski.com/articles/jquery-ui-datepicker上ui.core.js和ui.datepicker.js不是最新版本的,如果下载新版本jquery-ui-1.8.13中的css文件会造成日期控件不能显示的问题,所以这里使用了1.7.3的ui。简单一点就是用jquery-ui的压缩js。

本文转载自:http://blog.csdn.net/hj7jay/article/details/51050482

共有 人打赏支持
Yemon
粉丝 10
博文 320
码字总数 22799
作品 0
广州
架构师
iView 2.14.2 发布,基于 Vue.js 的企业级 UI 组件库

iView 2.14.2 发布了,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品。 更新内容如下: 修复 Select 在异步设置 Option 时,无法显示选中项的 bug。#3722 修...

aresn ⋅ 06/08 ⋅ 0

Element 2.3.8 发布,基于 Vue 2.0 的桌面端组件库

Element 2.3.8 发布了。主要更新内容如下: 修复 为 dates 的 DatePicker 在选择非当前月的日期后,面板会跳转至当前月的问题,#10973 修复可清空的只读 Input 仍会显示清空图标的问题,#10...

达尔文 ⋅ 05/12 ⋅ 0

Element 2.3.5 发布,基于 Vue 2.0 的桌面端组件库

Element 2.3.5 已发布,更新如下: 修复 DatePicker 的 为 week 时面板错误高亮的问题,#10712 修复 InputNumber 初始值为 0 时输入框为空的问题,#10714 新增 Select 的 属性,#10042 修复 ...

王练 ⋅ 04/21 ⋅ 0

基于 Vue 2.0 开发的 UI 组件库 - fish-ui

fish-ui 是基于vue2开发的一套ui组件库,其中css部分借鉴了semantic-ui的样式 demo: https://myliang.github.io/fish-ui/ github: https://github.com/myliang/fish-ui 安装 npm install le......

myliang ⋅ 2017/11/01 ⋅ 6

强大的JQuery-自定义插件

====jQuery插件编写原则===== 1.命名 jQuery..js 2.插件内部,this指向的是当前选择器取得的JQuery对象,不是内部对象, 例如click(), 内部的this指向的是DOM元素 3.this.each可以遍历所有元素...

chengfei_liu ⋅ 05/25 ⋅ 0

jQuery之validate验证表单

访问jQuery validate官网下载最新插件 https://jqueryvalidation.org/ validate是用来验证表单的 以前我们都是用js手动验证 现在可以通过这个插件直接调用别人写好的方法 更加简单方便 vali...

codingcoge ⋅ 05/19 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

JavaScript 加载框架 - Sleuth.js

Sleuth是一个加载框架,它允许开发者只需要require相应的库或者插件,不需要去下载,就可以直接使用,并且允许开发者任意切换版本。 使用 Sleuth.js 先后引用mapping-ch.min.js,sleuth.min....

jsing ⋅ 2014/11/23 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

Java桌球小游戏

其实算不上一个游戏,就是两张图片,不停的重画,改变ball图片的位置。一个左右直线碰撞的,一个有角度碰撞的。 左右直线碰撞 package com.bjsxt.test;import javax.swing.*;import j...

森林之下 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部