jquery插件日历效果的演示

代码中使用了一部分方法,并不是全部,但是经过整理效果自认为还是可以的,希望可以对大家有所帮助

<!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>
<script type="text/javascript" language="javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
<!--引入css样式文件-->
<link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.18.custom.css">

<script type="text/javascript">
$(function(){
  $("#datepicker").datepicker({
   altFormat:"DD,d MM,yy",
   altField:"#actualDate",  
   //自动调整大小,改变的是输入框的大小 true为自动调整,false不允许自动调整
   autoSize:false,
   //设置当前月份是否可变,默认为false不可变,true为可变
   changeMonth:true,
   //设置当前年份是否可变,默认为false不可变,true为可变。前后都有10年可以选择
   changeYear:true,
   //更改日期的格式,在日期输入的文本框中可得到体现
   dateFormat:"yy-mm-dd",
   //缺省日期 +/- 相对于当前的日期计算
    defaultDate:+1,
    //显示当前年的周数
   showWeek:true,
   //年份开始的第一天
   firstDay:1,
   //showOn:"both"
   //弹出日历的效果
  
showAnim:"toggle",
   prevText:"上个月",
   nextText:"下个月",
   //年份的前后取值范围
    
yearRange:"c-5:c+5",
   // minDate:1,
   // maxDate:25,
  //显示当前月份日期的其他日期
  
showOtherMonths:true,
   //可以选择其他月份的值 默认不可选
   selectOtherMonths:true, 
   //连续弹出3个月的日历
   numberOfMonth:3
   });
});
</script>
</head>

<body>
<div>日历演示效果</div>
<input type="text" id="datepicker">
<input type="text" id="actualDate">
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值