开发者社区> cometwo123> 正文

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 plaincopy
  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">


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery EasyUI API 中文文档 - 日期框(DateBox)
DateBox 日期框 扩展自 $.fn.combo.defaults。用 $.fn.datebox.defaults 重写了 defaults。 依赖 combo calendar 用法 1. 1. $('#dd').datebox({   2.     required:true 3. });  特性 其特性扩展自 combo,下列是为 datebox 增加的特性。
882 0
Android学习之Image操作及时间日期选择器
一、基础学习 1.ImageView是图片容器,就相当于RadioGroup是RadioButton的容器一样,是View的直接子类。 1:        只需要记住图片在res/drawable-xxx下就行了。
847 0
bootstrap-daterangepicker:最好用的日期范围选择组件
bootstrap-daterangepicker:最好用的日期范围选择组件
29 0
安卓开发_时间、日期选择器的简单使用
这里介绍两个控件来简单实现日期,时间的功能 两个控件都只要在xml文件中添加一下即可 一、AnalogClock控件 1 2 6 7 15 20 21   二、DialogClock控件 1 2 6 ...
717 0
FancySelect – 更好用的 jQuery 下拉选择框插件
  FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择。FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以了。
878 0
Flex自定义组件开发之日周月日期选择日历控件
原文:Flex自定义组件开发之日周月日期选择日历控件           使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标。当用户在控件边框内的任一位置单击时,将弹出一个 DateChooser 控件,显示当月的所有日期。
1032 0
+关注
1030
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载