开发者社区> 灵动生活> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery日期弹出选择框Datepicker效果

简介: 无论你是一个机票在线预定网站设计师,还是一个工程任务管理者,抑或在你的注册表单上有个生日填写项目;本文即将提到的日历日期选择弹出窗口都将帮助你简化用户操作,提高网站的用户体验和易用性。 教程目标:教会大家如何jQuery的UI插件Datepicker通过短短几行JavaScript代码制作一个日期选择弹出窗口,当用户在弹出的日期选择框中选择一个日期后,该日期会自动填充到Input框中(INPUT中值的后台读取与手动输入所获得的值没有任何区别)。
+关注继续查看

无论你是一个机票在线预定网站设计师,还是一个工程任务管理者,抑或在你的注册表单上有个生日填写项目;本文即将提到的日历日期选择弹出窗口都将帮助你简化用户操作,提高网站的用户体验和易用性。

教程目标:教会大家如何jQuery的UI插件Datepicker通过短短几行JavaScript代码制作一个日期选择弹出窗口,当用户在弹出的日期选择框中选择一个日期后,该日期会自动填充到Input框中(INPUT中值的后台读取与手动输入所获得的值没有任何区别)。

本教程日期选择弹出窗口最终效果:

查看Datepicker日期选择弹出窗口的演示

 

你也可以在线查看代码吾爱给大家制作的在线演示和实例下载:

查看演示DatePicker

下载实例Demo Rar

Tips:此UI插件由代码吾爱进行汉化,如果有任何问题请大家在本文底部反馈。推荐大家下载我们提供的实例包,里面包含完整的jQuery.js和datepicker插件JS文件以及一个完整的示例。

使用方法与个性化设置

你需要知道的

假设我们需要在如下HTML代码中的文本输入框INPUT上(ID分别为"leavedate"和"returndate"的INPUT)绑定一个日期选择框:

<form id="trip" action="#">     <fieldset>       <legend>旅行期限(传统日期格式)</legend>             <div class="fields">                 <div><label for="leavedate">出发日期:</label>                        <input type="text" id="leavedate" name="leavedate"/>                 </div>                 <div><label for="returndate">返回日期:</label>                      <input type="text" id="returndate" name="returndate"/>                  </div>                </div>           </fieldset>   </form>  

要实现这一目标,你首先应该在jQuery官方UI页面中下载Datepicker插件(推荐下载本页提供的实例包),然后与jQuery基库同时以外部链接的形式引入到你需要用到此功能页面的<head>标签区域中。如下:

<script language="JavaScript" src="jquery.js"></script>
<script language="JavaScript" src="jq.date.js"></script>

Tips:请注意,你需要首先引入jQuery基库(即jquery.js),然后才是jq.date.js文件。

使用Datepicker制作弹出日期框,不需要对原有HTML页面做任何形式的修改,因为它是以JavaScript的DOM形式动态绑定到INPUT标签上的。要实现将弹出框与上面实例中的文本输入框INPUT绑定,一行代码即可完成:

$('#trip input#leavedate').datepicker();

Tips:如果你需要在实例的基础上进行修改,编写JS语句时请注意每个DIV层和INPUT空间ID的名称。

初始的日期选择效果是相当难看的,而且也非常不实用;我们需要进行美化和修改:

Standard date picker

个性化设置

Datepicker的真正强大之处是它支持设计者按照自己的需求自行设置。我们将以三个步骤告诉大家如何对其进行自定义。

CSS样式自定义:

首先,我们需要给日期弹窗的表现样式进行美化,以便能更好的融入到我们的实际运用中。jQuery本身提供给我们针对Datepicker的很多CSS日历样式,你可以选择使用其中的样式,当然也可以自行编辑合适的CSS样式文件。

本例中的弹窗框日历样式为jQuery提供的默认皮肤样式之一,日历截图如下:

 

日期格式自定义:

我们可以在初始化函数.datepicker()中定义各种日期格式,以下为一些常用日期格式:

  1. //yy表示完整年份:2008。y表示简写年份:08   
  2. //mm表示单月补零:01。m表示简写月份:1   
  3. //dd表示单日补零:09。d表示简写:9   
  4. $('#trip input#leavedate').datepicker({ dateFormat: $.datepicker.W3C }); // 2008-01-31   
  5. $('#trip input#leavedate').datepicker({ dateFormat: 'yy年m月d日' }); // 2008年1月31日   
  6. $('#trip input#leavedate').datepicker({ dateFormat: 'yy/m/d'' }); // 2008/1/31   
  7. $('#trip input#leavedate').datepicker({ dateFormat: 'y/m/d' }); // 08/1/31   
  8. $('#trip input#leavedate').datepicker({ dateFormat: 'yy年m月d日,D' }); //2008年1月31日,星期一   
  9. //代码吾爱www.code52.net   
  10.       

如上例所示,你可以根据自己的需要任意修改日期格式;比如在年月日之间以汉字、斜线、空格、短横杠间隔。

用户在选择日期后,对应的输入框会出现我们定义格式的日期。

 

表现行为自定义:

最后一个可以自定义的地方是弹出框表现行为。默认情况下,日期选择框会在用户点击输入框时触发弹出(即在输入框的Focus事件发生时触发)。

我们可以很简单的改变这种模式,如演示所示,我们将弹出框的触发绑定在了一个按钮图片上,而没有采用默认的行为模式:

  1. //showOn值为button表示将日历框绑定在一个按钮(图片)上;   
  2. //buttonImage的值表示图片文件的名称和位置(请注意路径)   
  3. //如果不需要显示按钮而只显示图片,请置buttonImageOnly的值为True。   
  4. $('#trip input#leavedate').datepicker({ showOn: 'button', buttonImage: 'calendar.gif', buttonImageOnly: true });   

通过以上对Datepicker进行自定义,我们即成功完成了演示中的那种效果。

 

版权

作者:灵动生活 郝宪玮

出处:http://www.cnblogs.com/ywqu

如果你认为此文章有用,请点击底端的【推荐】让其他人也了解此文章,

img_2c313bac282354945ea179a807d7e70d.jpg

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

 

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

相关文章
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
0 0
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
0 0
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
0 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
0 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
0 0
论Jquery瀑布流做成插件的想法
现实中很多问题的根源说白了就是经济问题。
0 0
+关注
灵动生活
12年电商经验,8年IT项目管理经验,曾就职于中国第一家上市的B2C电商公司麦考林,擅长电商业务模式规划以及大型电商系统架构。创立闪酷&amp;酷客多小程序
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载