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

JQuery Datepicker

    博客分类:
  • Web
阅读更多

1、下载JQuery

http://jquery.com/

http://jqueryui.com/

 

2、HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery Datepicker</title>
<link type="text/css" href="script/jquery/theme/base/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="script/jquery/theme/base/jquery.ui.core.css" rel="stylesheet" />
<link type="text/css" href="script/jquery/theme/base/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="script/jquery/theme/base/jquery.ui.accordion.css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="script/jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="script/jquery/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="script/jquery/ui/i18n/jquery.ui.datepicker-ja.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
	var date=new Date();  
	var day=date.getDate();  
	day=parseInt(day)-1;  
	date=new Date(parseInt(date.getFullYear()),parseInt(date.getMonth())+1,0);  
	$("#datepicker").datepicker({
		showOn:'button',
		buttonImage:'image/calendar.gif',
		buttonImageOnly:true,
		minDate:-day,
		maxDate:+parseInt(date.getDate())-day-1
	});  
});  
function initAnother(){  
	if(document.getElementById("datepicker").value!=null){  
  		$("#another").datepicker({minDate:'-3d'});
 	}  
}  
function initCalendar(){  
	if(document.getElementById("datepicker").value!=null){  
  		$("#another").datepicker({minDate:'-3d'});  
	}  
}  
</script>
<style type="text/css">
.demo input,img{
	vertical-align:middle;
}
</style>
</head>
<body>
	<div class="demo">
		date: <input type="text" id="datepicker" onchange="initAnother()">
		<br/><br/>
		date: <input type="text" id="another" onfocus="initCalendar()">
	</div>
</body>
</html>
分享到:
评论

相关推荐

    jquery datepicker日期选择插件鼠标点击text

    jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text jquery datepicker日期选择插件鼠标点击text

    jquery datepicker 小例子

    jQuery UI中的`datepicker`是一个非常流行的JavaScript组件,用于在网页上添加日历选择功能。它提供了丰富的自定义选项,使得日期选择器可以适应各种界面设计和功能需求。在这个"jquery datepicker 小例子"中,我们...

    js完美日期选择器,jQuery Datepicker最新demo,包括所有语言包

    **jQuery Datepicker** 是一个广泛使用的JavaScript库,用于在网页上添加交互式的日期选择功能。这个库基于流行的jQuery框架,提供了丰富的自定义选项,样式美观,兼容性良好,且支持多语言,使得它在全球范围内非常...

    jquery datepicker 时分秒

    `jQuery UI Datepicker` 是一个流行的 JavaScript 库,用于在网页上添加日期选择功能。它源自 jQuery 库,提供了一种简单、用户友好的方式来处理日期输入。在这个特定的场景中,我们不仅关注基本的日期选择,还涉及...

    ASP.NET jquery datepicker的使用

    首先,要使用jQuery的datepicker,你需要引入jQuery UI库,它包含了datepicker组件。你可以从官方站点(https://jqueryui.com/)下载最新版本,或者通过CDN(内容分发网络)链接将其添加到你的HTML文件中。例如: `...

    jQuery Datepicker用到的js和CSS文件

    jQuery Datepicker用到的js和CSS文件 jquery-ui.css jquery-ui-timepicker-addon.css jquery-1.7.2.js jquery-ui.min.js jquery-ui-timepicker-addon.js jquery-ui-sliderAccess.js jquery-ui-timepicker-zh-CN.js

    JQuery Datepicker 多选日期

    在网页开发中,jQuery UI 的 Datepicker 是一个广泛使用的组件,它为用户提供了方便的日期选择功能。然而,原生的 Datepicker 默认情况下只允许选择单个日期。本主题将深入探讨如何通过扩展和定制,实现 jQuery ...

    jquery datepicker today clear 实现 (日期区间选择)

    jquery datepicker today clear 扩展实现,全网惟一资源。 当时项目要用,在网上没找到现成的,找到的都是需要修改源代码的,自己最后看源码实现的扩展,没有污染源码,如果项目有需要,拿去直接用就行了。 而且日期...

    jquery 日期选择 datepicker

    jQuery UI中的日期选择器(DatePicker)是一个非常流行的前端组件,用于在网页上提供方便的日期输入功能。这个组件使得用户可以以日历的形式选择日期,而不是手动输入,从而提高了用户体验和数据准确性。以下是对`...

    jQuery Datepicker 日期选择插件

    jQuery Datepicker 是一个非常流行的前端开发插件,用于在网页中添加日期选择功能。这个插件是jQuery UI库的一部分,提供了丰富的自定义选项和多语言支持,使得在网页上实现美观且用户友好的日期输入变得简单。在本...

    jquery datepicker

    jQuery UI Datepicker是一个非常流行的JavaScript库,用于在网页上添加日期选择器功能。这个库是jQuery UI框架的一部分,提供了一种优雅、用户友好的方式来输入或选择日期。以下是对`jQuery UI Datepicker`的详细...

    日期选择器:jquery datepicker的使用

    日期选择器在网页开发中是常见的一种交互组件,它能够帮助用户方便地选取日期,而jQuery UI中的datepicker组件就是这样一个强大的工具。本文将详细介绍如何在项目中使用jQuery UI的datepicker,以及它的一些主要功能...

    jquery datepicker 日历显示控件 超牛

    《jQuery Datepicker:超牛日历显示控件的深度解析》 在Web开发中,日期选择器是一个不可或缺的组件,它极大地提升了用户交互体验。jQuery UI中的Datepicker控件就是一个非常强大且灵活的日历插件,它能轻松满足...

    jQuery datepicker 日期选择器 中文汉化版 开始日期结束日期

    jQuery UI的日期选择器(jQuery datepicker)是一个广泛使用的组件,尤其在网页表单中用于输入日期时。这个组件提供了一个优雅、用户友好的界面,允许用户通过日历视图来选择日期,而不是手动输入。在中文环境中,...

    AngularJS封装jQuery Datepicker

    **AngularJS 封装 jQuery Datepicker 知识点详解** 在Web开发中,日期选择器是一个常见的组件,用于用户输入日期或选择日期范围。AngularJS 和 jQuery 的结合使用可以为开发者提供更强大的功能和更好的用户体验。这...

    jQuery datepicker 日历组件

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

    jQuery多功能日期时间选择器datepicker.zip

    《jQuery日期时间选择器datepicker深度解析》 在Web开发中,日期和时间的选择是一个常见的功能需求,用户界面的友好性和易用性对于提升用户体验至关重要。jQuery的datepicker插件以其丰富的功能和灵活的定制性,...

    jquery datepicker cn en

    jquery datepicker cn en

    基于jquery datepicker的日期控件

    在网页开发中,jQuery UI 的 Datepicker 是一个非常流行的日期选择控件,它为用户提供了一个友好、可定制的界面来选择日期。这个控件广泛应用于各种网页应用中,如在线预订系统、表单验证以及时间相关的数据输入。...

Global site tag (gtag.js) - Google Analytics