`
daizhaoyun
  • 浏览: 27720 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jQuery日历组件

阅读更多

jsp界面

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出日历组件演示</title>
<link href="date/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="date/jquery1-5-2.js"></script>
<script type="text/javascript" src="date/jquery-ui-1.8.7.custom-core.min.js"></script>
<script type="text/javascript" src="date/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="date/jquery.ui.widget.js"></script>
<script type="text/javascript">
$(function() {
	 $.datepicker.setDefaults($.datepicker.regional['zh-CN']);
	 $('.datepicker').each(function(i){
         $(this).datepicker({
           inline: true,
           dateFormat: 'yy-mm-dd',
           showButtonPanel: false
          });
         $(this).attr("readOnly","true");
       });
});

//日期校验
function checkDate(beginStartDate,beginEndDate) {
           if(null==beginStartDate || beginStartDate.length==0) {
	            return true;
           }
           if(null==beginEndDate || beginEndDate.length==0){
	           return true;
           }
           return beginStartDate<=beginEndDate;
      }
	   
 function checkformDate() {
                  //获取页面的时间
           var beginStartDate = document.getElementById("start").value;
           var beginEndDate= document.getElementById("end").value;
           if(!checkDate(beginStartDate,beginEndDate)) {
	         alert("时间条件:结束日期必须大于开始日期!");
	         return false;
           }
           return true;	
       }
	</script>
</head>

<body>

	<input type="text" id="start" class="datepicker" readonly="true" /> 至
	<input type="text" id="end" class="datepicker" readonly="true" /><br />
	<input type="button" onclick="checkformDate()" value="校验" />

		
</body>
</html>
 

 

分享到:
评论
1 楼 qiannancy 2012-04-26  

相关推荐

    jquery日历组件

    《jQuery日历组件详解》 在网页开发中,日历组件是常见的交互元素,它能够为用户提供方便的日期选择功能,常用于表单输入、事件安排等场景。jQuery日历组件以其简洁的API和强大的自定义能力,成为了开发者们常用的...

    JQuery日历组件

    **jQuery日历组件详解** jQuery日历组件是前端开发中常用的一种交互元素,它能够帮助用户在网页上方便地选择日期,广泛应用于各种在线预订、时间表管理等场景。本篇将详细介绍jQuery日历组件的基本概念、使用方法、...

    基于jquery的小日历,可以单选、多选、按范围选

    首先,我们来看这个jQuery日历插件的基本用法。在HTML页面中,你需要指定一个元素来显示日历,这通常是一个input元素或者div元素。例如,你可以设置一个id为"date-display"的div元素作为目标: ```html ...

    jquery 日历控件 时分秒

    4. **Jquery_日历**:这可能是一个基础的jQuery日历组件,可能只提供日期选择,但在某些实现中,开发者可能会扩展它以包含时间选择功能。这种控件通常易于定制,适合那些希望自定义样式和行为的开发者。 5. **...

    jQuery datepicker 日历组件

    jQuery UI中的Datepicker日历组件是一款广泛使用的JavaScript插件,它为网页添加了美观、功能丰富的日期选择功能。这个组件是jQuery UI库的一部分,提供了多种样式、语言支持以及可定制的选项,使得开发者能够轻松地...

    JQuery 最新组件库

    **jQuery 最新组件库详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。随着技术的发展,jQuery也不断更新,推出了各种新的组件,为开发者提供了更为丰富的功能和更...

    一个非常牛的jquery做的日历,排班,添加提醒功能

    一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的jquery做的日历,排班,添加提醒功能一个非常牛的...

    jQuery日历签到插件

    然而,这个原生的日期输入控件在样式和功能上可能有所限制,因此开发者通常会使用自定义的日历组件。HTML5的Canvas或者SVG也可以用来创建更复杂的日历图形,提供更丰富的视觉效果。 CSS3则负责日历插件的样式设计,...

    jquery 日历

    **jQuery日历插件详解** 在网页开发中,日历组件常常被用于各种场景,如日期选择、事件安排等。jQuery作为一个轻量级的JavaScript库,提供了丰富的插件供开发者使用,其中包括各种日历插件。本文将详细介绍jQuery...

    jquery原生代码生产日历组件

    **jQuery原生代码生产日历组件** 在Web开发中,日历组件是一个常见的需求,它可以帮助用户方便地选择日期,广泛应用于表单填写、事件安排等场景。在本篇文章中,我们将探讨如何使用jQuery来创建一个自定义的日历...

    jquery 日历插件源码

    这大大提升了日历组件的实用性。 总结来说,jQuery日历插件Calendar是一个功能强大且易于定制的工具,通过`calender.css`、`index.html`和`calender.js`这三个文件,我们可以了解其工作原理,并根据项目需求进行...

    jquery日历签到插件

    在网页应用中,日历组件经常被用来处理日期相关的操作,如日期选择、事件记录、日程安排等。jQuery日历签到插件是一种方便用户进行日期选择和签到操作的工具,它简化了前端开发中的日期交互过程,提升了用户体验。本...

    JQuery常用组件

    内含有: jquery.1.1.4.core.zip --jQuery最新核心代码 jquery.calendar.zip --日历组件 jquery.menu.zip --菜单组件 jquery.tablesorter.zip --表格排序组件 jquery.tabs.zip --标签页组件 ...

    jquery日期组件

    jQuery日历组件通常提供一个用户友好的界面,用户可以通过点击日历图标打开一个下拉日历来选择日期。日历可能包含不同颜色的标记以区分工作日、周末或者特殊日期。此外,它还支持多种语言,以适应全球用户的使用需求...

    JQuery日历控件 .

    通过引入JQuery UI库,我们可以轻松地在网页上添加一个功能丰富的日历组件。 3. **实现日历控件** 要实现JQuery日历控件,首先需要在页面中引入JQuery和JQuery UI的CSS和JS文件。然后,选择一个元素(如文本框或...

    jquery日历表格插件

    **jQuery日历表格插件详解** 在Web开发中,日历和表格是常见的交互元素,它们用于展示数据、安排事件或进行日期选择。jQuery作为一款轻量级的JavaScript库,提供了丰富的插件来扩展其功能,包括日历表格插件。本篇...

    PHP+AJAX+jquery日历插件FullCalendar+农历日程管理项目

    使用了jquery日历插件FullCalendar,使用通过PHP程序调用了MYSQL的数据库,实现HTML静态页在线AJAX新建日程,修改、删除日程序,本集成了中国人的农历,采用了UTF8的编码,根目录里带有SQL数据库,下载后导入你的...

    JQuery日历代码

    而"JQuery日历代码"通常指的是使用jQuery库来实现的一种交互式日历组件。这种组件常用于网站中展示日期选择器或者日程管理功能。在本案例中,提供的压缩包文件包含了实现这一功能的代码示例。 首先,让我们了解一下...

    jQuery日历插件FullCalendar

    jQuery日历插件FullCalendar是一款强大的、灵活的、易于定制的日历组件,广泛应用于网页中展示日程安排、会议时间等与日期相关的功能。它提供了丰富的API和多种视图,如日视图、周视图、月视图、Agenda视图等,使得...

Global site tag (gtag.js) - Google Analytics