`
linde13652
  • 浏览: 23099 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

用javascript小工具实现日期简洁输入

阅读更多
  在用户登陆界面通过javascript实现日期的简单输入,首先要在jsp的web根目录下导入时间的包文件(注:附件里带有)然后在jsp页面的<head></head>之间倒入注释:

 <!-- calendar stylesheet --> 
 <link rel="stylesheet" type="text/css" media="all"
href="${pageContext.request.contextPath }/calendar/calendar-win2k-cold-1.css" title="win2k-cold-1" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/list.css" /> <!-- main calendar program --> 	
 <script type="text/javascript"
src="${pageContext.request.contextPath }/calendar/calendar.js"></script> 		
<!-- language for the calendar -->	
script type="text/javascript"
src="${pageContext.request.contextPath }/calendar/calendar-en.js"></script>	
 <!-- the following script defines the Calendar.setup helper function, which makes
       adding a calendar a matter of 1 or 2 lines of code. --> 	
[<script type="text/javascript"
src="${pageContext.request.contextPath }/calendar/calendar-setup.js"></script> 

完成了上面步骤,就可以在日期的<input/>后面加入触发器代码:

<script type="text/javascript">
Calendar.setup({
	inputField:"birthday",
					
         ifFormat:"%Y-%m-%d",
	
         button:"birthday_trigger"});

      </script>

这样,鼠标一点击日期的输入框,就会跳出时间供我们选择,很方便!!
分享到:
评论

相关推荐

    超简洁的JS日期控件

    在实际应用中,使用JavaScript日期控件有许多优点,比如灵活性高,可以自定义样式,无需依赖外部库,且加载速度快。对于那些需要用户输入日期但又希望避免输入格式错误或增强用户体验的网页来说,这是一个很好的解决...

    简洁易用的JavaScript万年历,带农历

    总结来说,一个简洁易用的JavaScript万年历需要结合HTML、CSS和JavaScript技术,利用Date对象处理日期,使用适当的算法或库实现农历转换。通过良好的设计和交互,可以提供用户友好的体验。在实际开发过程中,可以...

    简洁易用的JavaScript万年历界面

    JavaScript万年历界面是一种在网页上实现的日历组件,它允许用户方便地选择日期,常用于表单输入、事件管理或其他需要日期选择的场景。在本文中,我们将深入探讨如何创建一个简洁易用的JavaScript万年历界面,以及...

    javascript日期控件四

    JavaScript日期控件是一种在网页上实现用户交互式选择日期的工具,它极大地提高了用户体验,尤其在需要用户输入特定日期的场合。"javascript日期控件四"可能是这一系列控件的第四个版本,提供了更完善的特性或者修复...

    js简洁日历-日期选择-万年历

    "js简洁日历-日期选择-万年历"项目就是一个利用JavaScript实现的轻量级日历组件,它提供了用户友好的日期选择功能,适用于各种需要日期输入的场景。 这个日历组件的亮点在于其简洁性,意味着它可能具有高效的代码...

    网页模板——jQuery 日期时间输入格式插件.zip

    网页模板中的jQuery日期时间输入格式插件是一种常用的前端开发工具,它可以帮助开发者为用户界面创建交互式的日期和时间选择器。这些插件通常基于流行的JavaScript库jQuery,由于jQuery的广泛使用和良好的跨浏览器...

    使用laydate日期输入弹框

    在本主题中,我们将深入探讨如何使用laydate创建日期输入弹框,并通过代码实例来帮助你更好地理解和应用这一工具。 首先,要使用laydate,你需要在你的项目中引入laydate的CSS和JS文件。这些文件通常可以从laydate...

    Javascript 日期选择控件 [My97DatePicker]

    总之,My97DatePicker 是一个强大且实用的JavaScript日期选择控件,它为开发者提供了丰富的功能和高度的定制性,是网页前端开发中的得力工具。无论是个人项目还是企业级应用,它都能满足多样化的日期输入需求,提升...

    一个名为My97DatePicker的javascript日期控件

    My97DatePicker是一款基于JavaScript的日期选择控件,它在Web开发中被广泛使用,尤其在需要用户输入日期的场景下。这款控件以其简洁易用的界面、强大的功能和高度自定义的特性赢得了开发者们的青睐。下面我们将深入...

    简洁日期控件

    总的来说,"简洁日期控件"是一个强大而灵活的前端工具,它的设计目的是简化日期选择功能的实现,提高用户体验。通过深入研究提供的配置说明,开发者可以轻松地将其整合到自己的项目中,满足各种日期相关的交互需求。...

    jquery 日期选择工具

    jQuery作为一款广泛使用的JavaScript库,提供了丰富的插件来实现这一功能。本文将深入探讨jQuery日期选择工具,特别是ChiperSoft的Kalendae插件,帮助开发者更好地理解和应用这一工具。 一、jQuery与日期选择器 ...

    Javascript教程

    这意味着用JavaScript编写的代码可以在Windows、macOS、Linux等多种平台上运行,无需进行额外的适配。 #### 四、JavaScript的应用场景 - **网页交互**:最常见的应用场景之一,如表单验证、动态加载内容等。 - **...

    JavaScript特效大全

    JavaScript特效大全是一个集合了众多...合理使用JavaScript特效,可以使网页更加生动、有趣,但也要保持简洁,避免过度设计。通过不断实践和学习,开发者可以掌握更多的JavaScript特效技巧,进一步提升网页设计的水平。

    layDate多款日期时间控件

    layDate是一款功能强大的JavaScript日期时间插件,广泛应用于网页中的日期和时间选择。这款控件设计简洁、易用,提供了多种样式和模式,满足不同场景下的需求。在本篇文章中,我们将深入探讨layDate的基本使用、主要...

    JavaScript+jQuery交互式Web前端开发-源代码.zip

    例如,你可以使用 JavaScript 来实现网页上的表单验证、动态加载内容、时间日期显示等。 jQuery 是一个 JavaScript 库,它简化了 JavaScript 的使用,提供了一套丰富的API来处理常见的网页操作,如选择DOM元素、...

    JavaScript示例大全,JavaScript,JavaScript示例

    此外,函数式编程的概念也体现在JavaScript中,如高阶函数、闭包和箭头函数,这些都是提高代码效率和简洁性的强大工具。 JavaScript还提供了事件处理机制,使得用户与网页的交互变得可能。例如,通过...

    javascript控件

    JavaScript可以创建弹出式或嵌入式的日历,用户可以通过点击按钮选择日期,而不是手动输入,减少输入错误。常见的库有jQuery UI的Datepicker,它提供了多种主题和配置选项,可以根据需求定制。 2. **菜单控件**: ...

    js日期日历控件

    JavaScript日期日历控件是一种常见的前端开发工具,用于在网页上提供用户友好的日期选择功能。这类控件通常由JavaScript代码实现,可以是独立的库或者框架的一部分,如jQuery UI、Bootstrap Datepicker等。在网页...

    基于JavaScript的简洁UI组件库Rabbit UI.zip

    "基于JavaScript的简洁UI组件库Rabbit UI"是一个专为前端开发者设计的库,它旨在提供一系列轻量级且易于使用的用户界面元素。这个库利用了JavaScript的强大功能,结合HTML5技术,为网页应用程序带来现代化的外观和...

Global site tag (gtag.js) - Google Analytics