jQuery日期选择器插件date-input

简介:

官网:http://jonathanleighton.com/projects/date-input/

下载:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js

http://github.com/jonleighton/date_input/raw/master/date_input.css


插件下载:http://download.csdn.net/detail/cometwo/9052329

中文支持:

  1. jQuery.extend(DateInput.DEFAULT_OPTS, {  month_names: ["一月""二月""三月""四月""五月""六月""七月""八月""九月""十月""十一月""十二月"],  short_month_names: ["一""二""三""四""五""六""七""八""九""十""十一""十二"],  short_day_names: ["一""二""三""四""五""六""日"]});  

说明:默认是日期格式很不好,需要修改。

全部代码:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>日历</title>  
  6. <script type="text/javascript" src="jquery-1.3.2.js"></script>   
  7. <script type="text/javascript" src="jquery.date_input.js"></script>   
  8. <link rel="stylesheet" href="date_input.css" type="text/css">   
  9. <script>  
  10. jQuery.extend(DateInput.DEFAULT_OPTS, {   
  11. month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],   
  12. short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],   
  13. short_day_names: ["一", "二", "三", "四", "五", "六", "日"],  
  14.  dateToString: function(date) {  
  15.     var month = (date.getMonth() + 1).toString();  
  16.     var dom = date.getDate().toString();  
  17.     if (month.length == 1) month = "0" + month;  
  18.     if (dom.length == 1) dom = "0" + dom;  
  19.     return date.getFullYear() + "-" + month + "-" + dom;  
  20.   }  
  21.   
  22. });   
  23.   
  24. $(function() {   
  25. $(".biuuu1").date_input();   
  26. $(".biuuu2").date_input();   
  27. });   
  28. </script>  
  29. </head>  
  30.   
  31. <body>  
  32. <input type="text" class="biuuu1" name="date"/>   
  33. <input type="text" class="biuuu2" name="date"/>   
  34. </body>  
  35. </html>  







http://






原文:点击打开链接

http://blog.csdn.net/sujudz/article/details/8120222



jquery的date input日期选择控件,在一些日期表单上使用,效果还是比较好的。

官方介绍和下载地址 http://jonathanleighton.com/projects/date-input/

使用前需要导入jquery库和date input的库和css文件
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="js/jquery.date_input.js"></script>
<link rel="stylesheet" href="css/date_input.css" type="text/css">

官网下载的包里就包含了js和css文件。

 使用前先改变默认的日期格式,下面是中文日期。参数设置都很简单,就是最后的dateToString参数值是返回的日期格式,这里是 年-月-日 的格式。可以自己更改。

[javascript]  view plain copy
  1. $.extend(DateInput.DEFAULT_OPTS, { month_names: ["一月""二月""三月""四月""五月""六月""七月""八月""九月""十月""十一月""十二月"],  
  2.     short_month_names: ["一""二""三""四""五""六""七""八""九""十""十一""十二"],   
  3.     short_day_names: ["日","一""二""三""四""五""六"],  
  4.     dateToString: function(date) {  
  5.         var month = (date.getMonth() + 1).toString();//月份  
  6.         var dom = date.getDate().toString();//日  
  7.         if (month.length == 1) month = "0" + month;//控制月份为10一下的显示为01格式  
  8.         if (dom.length == 1) dom = "0" + dom;//同月份  
  9.         return date.getFullYear() + "-" + month + "-" + dom;  
  10.       }  
  11.     }  
  12. );  

 *在下载的压缩包里,有个translations目录,里面有默认语言的日期设置,jquery.date_input.zh_CN.js就是中文日期,不过他的short_day_names参数是["一", "二", "三", "四", "五", "六","日"]。星期日和一显示不对。

响应inpu组件代码

$(function(){$("#birthday").date_input();});

birthday是组件ID

<input readonly  id="birthday" type="text" name="birthday" size="20">


目录
相关文章
N..
|
3天前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
16 1
|
3天前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
29 2
|
3天前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中,:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择,为了更好地阐述:nth-of-type(n)的语法,这里假设selector是一个元素p选择器,如此,:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素,而且与p是否是该父元素的第n个子元素无关,比如
41 5
|
3天前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload
|
1天前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
3天前
|
JavaScript 前端开发 开发者
jquery选择器有哪些
jquery选择器有哪些
|
3天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
3天前
|
JavaScript 索引
jQuery 选择器有几种,分别是什么
jQuery 选择器有几种,分别是什么
26 5
|
3天前
|
Web App开发 JavaScript 前端开发
JQuery的选择器有哪些?
JQuery的选择器有哪些?
12 1
|
3天前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
11 0