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

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

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

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

查看演示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的名称。

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

个性化设置

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

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

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

表现行为自定义：

最后一个可以自定义的地方是弹出框表现行为。默认情况下，日期选择框会在用户点击输入框时触发弹出（即在输入框的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/archive/2008/11/26/1341400.html：，如需转载请自行联系原作者

jQuery日期弹出选择框Datepicker效果相关推荐

  1. JSP页面的日期控件可以弹出选择框选择日期

    JSP页面的日期控件可以弹出选择框选择日期 input框的如下 <input type="text" name="starttime" readonly= ...

  2. jquery easyui 弹出消息框

    PS:easyui 弹出消息框 系项目中实践中遇到的问题,特此转载收藏 <html> <head> <!-- 导入easyui插件的js和css样式; --> &l ...

  3. [RN] React Native 自定义 底部 弹出 选择框 实现

    React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...

  4. MUI框架div模拟按钮（日期选择器）导致双击才能弹出选择框，移动端Web不支持dblclick双击的问题。

    一些前任项目遗留的问题,mui坑太多,不知道为什么要用div模拟日期选择的button按钮,导致使用时点击2次才能弹出日期选择框,但是他之前的项目都没问题,可以单击弹出,浪费了我大量时间排查原因. ★ ...

  5. Android底部弹出选择框PickerView的使用

    希望大家可以留个关注点赞,后续会有更多的技术分享 前言 本次主要介绍Android中底部弹出框的使用,使用两个案例来说明,首先是时间选择器,然后是自定义底部弹出框的选择器,以下来一一说明他们的使用方法 ...

  6. Android中用两层AlertDialog来进行弹出选择框信息选择

    在Android经常会用到AlertDialog,把内容使用AlertDialog结合列表的形式显示出来,然后我们点击得到点击的信息. 这里可以使用两层的AlertDialog来实现 1:我们现在xm ...

  7. appium+python自动化98-非select弹出选择框定位解决

    前言 遇到问题:document.getElementsByClassName(...)[0] is undefined 选择框如果是select标签的,可以直接用select专用的方法去定位点击操作 ...

  8. wpf 点击按钮弹出选择框_WPF-PopupWindow wpf右下角弹出框，通过按钮调用，类似QQ CSharp C#编程 238万源代码下载- www.pudn.com...

    文件名称: WPF-PopupWindow下载 收藏√  [ 5  4  3  2  1 ] 开发工具: C# 文件大小: 90 KB 上传时间: 2013-07-24 下载次数: 19 详细说明:w ...

  9. 当前应用拦截NFC响应，不弹出选择框教程

    从上一篇的NFC支持所类型的卡读取之后,下面要解决的就是NFC的拦截响应,如果这一步没有做,当系统内有多个支持NFC的应用的时候,就会在nfc刷卡的时候弹出多个应用选择,我们需要的场景是,当前应用需要 ...

最新文章

  1. 十年公务员转行IT，自学AI三年，他淬炼出746页机器学习入门笔记
  2. leetcode-字符串中的第一个唯一字符
  3. GHOST系统封装详细图文教程
  4. 创建型模式：单例模式（懒汉+饿汉+双锁校验+内部类+枚举）
  5. Java开发工具插件配置记录
  6. 物联网3A格局：阿里云、亚马逊等入选Gartner最新全球物联网竞争报告
  7. LeetCode：208. 实现 Trie (前缀树)
  8. Linux文章大合集
  9. vcredist_x64.exe/vcredist_x86.exe的用处
  10. 戴尔 Inspiron 530s 通过 Clover_v2.5k_r5093 安装 macOS Catalina 10.15.3 教程
  11. mdx 医学词典_一些西医学方面词典的介绍
  12. 2021年暑期训练阶段三Day3
  13. 关于对ffmpeg中SAR/DAR/PAR的理解
  14. 一些事，只配当回忆．一些人，只能做过客。既不回头 何必不忘 既然无缘 何必誓言 。这个世界.那么脏.谁有资格.说悲伤。...
  15. equal 源码剖析
  16. SPSS多元线性回归残差分析的基本方法
  17. 自动驾驶平台Apollo 5.5阅读手记：Cyber RT中的任务调度
  18. sendToTarget与sendMessage
  19. 中山大学计算机技术考研科目,2017年中山大学0812计算机科学与技术考研专业目录及考试科目...
  20. Windows 7关闭睡眠(休眠)模式和删除休眠文件

热门文章

  1. ARGB 转换为RGB
  2. 关于项目进度慢的思考----如何提高整体开发效率
  3. 了解vue里的Runtime Only和Runtime+Compiler
  4. 使用runtime解决棘手问题锦集（持续更新）
  5. CASE WHEN 高阶用法?
  6. 2.Linux技能要求
  7. 谈谈自己的理解:python中闭包，闭包的实质
  8. 分布式入门之3：副本控制
  9. jni 入门 android的C编程之旅 ---环境搭建helloworld
  10. JQueryEasyUI validatebox 扩展其自带验证方法