Jquery 日期控件

JQuery（2） 

版权声明：本文为博主原创文章，未经博主允许不得转载。

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. k 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. // --></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. <!-- 引入 jQuery -->
  7. <mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script>
  8. <!--添加datepicker支持-->
  9. <mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>
  10. <mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>
  11. <!-- 或者引入jquery ui包，其中也包含对datepicker的支持
  12. <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>
  13. -->
  14. <!--引入样式css-->
  15. <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" />
  16. <!-- 添加中文支持-->
  17. <mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>
  18. <mce:script type="text/javascript"><!--
  19. //等待dom元素加载完毕.
  20. $(function(){
  21. $("#selectDate").datepicker({//添加日期选择功能
  22. numberOfMonths:1,//显示几个月
  23. showButtonPanel:true,//是否显示按钮面板
  24. dateFormat: ‘yy-mm-dd‘,//日期格式
  25. clearText:"清除",//清除日期的按钮名称
  26. closeText:"关闭",//关闭选择框的按钮名称
  27. yearSuffix: ‘年‘, //年的后缀
  28. showMonthAfterYear:true,//是否把月放在年的后面
  29. defaultDate:‘2011-03-10‘,//默认日期
  30. minDate:‘2011-03-05‘,//最小日期
  31. maxDate:‘2011-03-20‘,//最大日期
  32. //monthNames: [‘一月‘,‘二月‘,‘三月‘,‘四月‘,‘五月‘,‘六月‘,‘七月‘,‘八月‘,‘九月‘,‘十月‘,‘十一月‘,‘十二月‘],
  33. //dayNames: [‘星期日‘,‘星期一‘,‘星期二‘,‘星期三‘,‘星期四‘,‘星期五‘,‘星期六‘],
  34. //dayNamesShort: [‘周日‘,‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘],
  35. //dayNamesMin: [‘日‘,‘一‘,‘二‘,‘三‘,‘四‘,‘五‘,‘六‘],
  36. onSelect: function(selectedDate) {//选择日期后执行的操作
  37. alert(selectedDate);
  38. }
  39. });
  40. });
  41. // --></mce:script>
  42. </HEAD>
  43. <BODY>
  44. <input type="text" id="selectDate" readonly="readonly"/>
  45. </BODY>
  46. </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。

时间： 2024-12-17 04:15:55

Jquery 日期控件的相关文章

精确到秒的JQuery日期控件

项目中需要用到精确到秒的日期控件,到网上搜了一下,发现有一个JQuery控件可以实现该功能---TimerPicker.但是官网上没有提供该控件的完整Demo,而且没有提供汉化包,所以自己汉化了一下,以供需要的朋友参考. 效果图如下: 首先在页面中引用一下库: <link type="text/css" href="css/jquery-ui-1.8.17.custom.css" rel="stylesheet" /> <lin

jquery日期控件使用,起止时间

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中引用

jQuery Datepicker日期控件

datepicker可以为bootstrap添加一个事件选择控件,适用于任何需要调用的场合,支持多种事件格式输出(比如:dd, d, mm, m, yyyy, yy等),是制作网页不可缺失的插件. Requirements Bootstrap 2.0.4+ jQuery 1.7.1+ 在线文档 Datepicker基础使用 Datepicker功能定制 Datepicker英文文档 Datepicker中文文档 Datepicker项目主页 简单示例 var nowTemp =newDate()

jquery datepicker日期控件用法

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat=

Jquery Mobile日期控件mobiscroll

1.日期控件 参考:http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html http://www.wglong.com/main/artical!details?id=11 <link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" /> <script sr

jQuery LayDate 日期控件

她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她遵循LGPL协议,您可以免费将她用于任何个人项目. 版本 LayDate 1.1 作者:闲心贤 github 在线实例 实例预览 layDate - js日期控件与时间插件演示 实例预览 

python selenium 处理时间日期控件（十五）

测试过程中经常遇到时间控件,需要我们来选择日期,一般处理时间控件通过层级定位来操作或者通过调用js来实现. 1.首先我们看一下如何通过层级定位来操作时间控件. 通过示例图可以看到,日期控件是无法输入日期,点击后弹出日期列表供我们选择日期,自己找了一个日期控制演示一下,通过两次定位,选择了日期 #-*- coding:utf-8 -*- import time from selenium import webdriver driver = webdriver.Chrome() driver.get

[整理]通过AngularJS directive对bootstrap日期控件的的简单包装

最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看来写官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形式即可使用了. <!doctype html> <html ng-app="datepickerApp"> <head> <link type="text/css" rel="stylesheet" hre

easyui 日期控件清空值

最近用了Easyui的日期控件datebox,项目中要将选中值清空,于是就研究了一下. 1,调用方法清空 [javascript] view plain copy print? $('#yourId').combo('setText',''); 2,更改js文件 从官网下载的源文件中,datebox控件界面只有‘Today’,‘Close’事件,我们可以把清空选项值的事件添加到js中去,这样,只要引用了datebox这个控件,界面上就会有清空选项.具体修改步骤如下: 首先在官网上下载jquery