jquery实现日历效果

最新推荐文章于 2024-09-03 12:21:52 发布

拼GO

最新推荐文章于 2024-09-03 12:21:52 发布

阅读量1.7k

点赞数

分类专栏： jquery学习文章标签： jquery 日历 javascript button stylesheet function

本文链接：https://blog.csdn.net/wxlhlh001/article/details/7408850

版权

jquery学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!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>jquery日历效果</title>

<!--引入jQuery类库文件-->
<script language="javascript" type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="./js/jquery.ui.datepicker-zh-CN.js"></script>
<!--引入Css样式类库文件-->
<link rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css"/>

<style>
 #startTime,#endTime{
	  /* background-color:red;*/
	 }
</style>
<script type="text/javascript">
   $(function(){
	      //设置日历显示的采用的地区 是中国
	      $.datepicker.setDefaults( $.datepicker.regional[ "zh-CN" ] );
	      $("#startTime,#endTime").datepicker({
			    //altField:"#actualDate",
			    //altFormat:"DD, d MM, yy",
				autoSize:false ,//自动调整大小的操作 改变的输入框的大小
				changeMonth:false,//如果为true 弹出一个下拉的菜单
				changeYear:false,  //前边有默认10年 当前年份的 后边有默认10年组成的下拉菜单
				dateFormat:"yy-mm-dd", //日期的格式  呈现在输入的文本框中
				defaultDate:+1, //缺省的日期    + - 相对于当前的日期 计算 
			    showWeek: true,  //显示当前年的周数
				firstDay:1,  //当前年份开始的第一天
				showOn:"button", //borth 既可以触发按钮 又可以触发文本框 弹出 日历  如果是button 只能触发button事件
				buttonImage: "images/calendar.gif", //设置按钮的图片
				buttonImageOnly: true,       //设置这按钮只显示图片效果 不要有button的样式
				showAnim:"toggle", //弹出日历的效果
				prevText:"上一月",
				nextText:"下一月",
				yearRange:"c-5:c+5", //年份的前后取值范围
				//minDate:1,
				//maxDate:25,
				/*
				  结束日期的最小值 必须大于等于   开始日期的最大值  
				*/
				//showOtherMonths: true, //显示当前月份日期的其他日期值
				//selectOtherMonths: true, //显示当前月份日期的其他日期值 并且是可以选择的 默认是不可以选择的
			    numberOfMonths:3, //连续弹出3个月的日历
				showButtonPanel:true,
				closeText:"guan",
				//gotoCurrent:true
				onSelect:function(textDate,inst){
					  alert(textDate);
					}
			  });
	         //作业：实现 选择开始日期  结束日期的操作
			 
	   });

</script>
</head>

<body>
      <div>演示日历的效果</div>
      <!-- <div id="datepicker"></div>-->
      
      活动开始日期:<input type="text" id="startTime" />
      活动的结束日期:<input type="text" id="endTime" />
</body>
</html>

最终效果：