jQuery UI中的日历插件,有了它,你就不需要再找其他的了

原创 2012年03月28日 20:43:39

JQuery UI中集成了许多常用的效果,今天自学的其中的日历效果,感觉还不错,以后很多时候都可以用的到。在下边代码中还写了时间段的编写,很有用,大家可以试试。

<!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>
<!--引入jquery类库-->
<script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<!--引入Css样式类库文件-->

<link rel="stylesheet" href="jquery-ui-1.8.18.custom.css" />
<script language="javascript" type="text/javascript">

$(function (){
	
		$("#datepicker").datepicker({
			dateFormat:'yy-mm-dd',	//更改时间显示模式
			showAnim:"slide",		//显示日历的效果slide、fadeIn、show等
			changeMonth:true,		//是否显示月份的下拉菜单,默认为false
			changeYear:true,		//是否显示年份的下拉菜单,默认为false
			showWeek:true,			//是否显示星期,默认为false
			showButtonPanel:true,	//是否显示取消按钮,并含有today按钮,默认为false
			closeText:'close',		//设置关闭按钮的值
			yearRange:'2010:2012',	//显示可供选择的年份
			defaultDate:+7			//表示默认日期是在当前日期加上7天
			});
			
//---------------------利用datepicker创建时间段----------------
		$("#dateStart").datepicker({	//绑定开始日期
			changeMonth:true,	//显示下拉列表月份
			changeYear:true,	//显示下拉列表年份
			showWeek:true,		//显示星期	
			firstDay:"1",			//设置开始为1号
			onSelect:function(dateText,inst){
				//设置结束日期的最小日期
				$("dateEnd").datepicker('option','minDate',new Date(dateText.replace('-',',')));
				
				}
			});
			
		$("#dateEnd").datepicker({	//设置结束绑定日期
			changeMonth:true,	//显示下拉列表月份
			changeYear:true,	//显示下拉列表年份
			showWeek:true,		//显示星期	
			firstDay:"1",			//设置开始为1号
			onSelect:function(dateText,inst){
				//设置开始日期的最大日期
				$('#dateStart').datepicker('option','maxDate',new Date(dateText.replace('-',',')));
				}
			});
	
	});



</script>
</head>

<body>
	<!--
    	jQuery UI 使用 前提
        	第一步:引入别人的类库
            		js类库
                    css样式类库文件
            第二步:模拟实现
      -->
<div>
	填入日期:<input type="text" id="datepicker" />
</div>

<div>
	填入开始日期:<input type="text" id="dateStart" />
    填入结束日期:<input type="text" id="dateEnd" />

</div>

</body>
</html>


效果图:


jquery-ui日历插件的使用步骤

1.首先下载jquery-ui压缩包,解压导入项目中 2.引入需要的js与css文件 /resources/bootstrap/css/bootstrap.min.css" type="text/c...
  • qq_20910089
  • qq_20910089
  • 2015年12月28日 10:41
  • 2011

jq-weui滚动刷新,日历,和地址选择器

最近工作方面的原因,接触到了微信公众号。然后网上找资料发现了jq-weui这个框架,觉得特别不错,分享一下 下载jq-weui点击这里下载jquery-weui,这里一定要注意下载的版本。因为有些功能...
  • yummry
  • yummry
  • 2017年12月15日 10:55
  • 430

weui 时间控件含全天 上午 下午 选择

请假    $(function(){     $("#endtime").datetimePicker({         times...
  • yelin042
  • yelin042
  • 2017年08月09日 09:51
  • 2198

jqueryUI 日历

《1》 $("#rili").datepicker({ //-------------------------...
  • Fanbin168
  • Fanbin168
  • 2015年04月19日 21:15
  • 886

微信UI项目:jQuery WeUI

jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的JS组件均是以JQuery 插...
  • softwave
  • softwave
  • 2016年03月26日 14:26
  • 18214

jquery-weui地区选择器改为时间季度选择器

city-picker.js更改后的代码 // jshint ignore: start +function($){ $.rawCitiesData = []; var quarters = ["第...
  • u014788227
  • u014788227
  • 2017年02月08日 17:25
  • 5132

jQuery UI Datepicker精美的日期选择组件

日期选择组件在日常开发中使用还是非常广泛的,jQuery UI Datepicker作为jQuery UI的日期选择组件,不仅使用灵活、主题丰富多样,更因为日常普遍使用jQuery,所以是一个不错的选...
  • u012767263
  • u012767263
  • 2014年03月01日 17:15
  • 1660

jQueryUI中Datepicker(日历)插件的介绍和使用

http://jqueryui.com/datepicker/ jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: ...
  • fjseryi
  • fjseryi
  • 2016年07月18日 15:11
  • 7188

jQueryUI中Datepicker(日历)插件的介绍和使用(10级学员 郞志课堂笔记)

jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: 属性 数据类型 默认值 说明 ...
  • redarmy_chen
  • redarmy_chen
  • 2012年03月27日 21:10
  • 19726

jquery ui 日期控件中文

jquery.ui.datepicker-zh-CN.js为日期控件国际化中文资源文件 1.设置对应的日期控件相关参数 $( "#startDatepicker" ).datetimepicker({...
  • xiaomin1991222
  • xiaomin1991222
  • 2016年03月10日 16:05
  • 921
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery UI中的日历插件,有了它,你就不需要再找其他的了
举报原因:
原因补充:

(最多只允许输入30个字)