用jquery插件实现漂亮的日历效果

原创 2012年03月30日 14:52:40

<!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="./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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery插件FullCalendar日程表实现可扩展Google日历功能

jQuery插件FullCalendar日程表实现可扩展Google日历功能 这个介绍 jQuery 日历FullCalendar插件是一个非常不错的日历工具,可用于制作日程表或计划...

用jquery插件-slider实现滑块的效果

滑块的效果 <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.

jquery插件实现幻灯效果

  • 2015-04-14 13:06
  • 814KB
  • 下载

利用jquery插件中的拖拽与放置实现的相册效果,可以删除和恢复

该效果为官方提供,本人只是进行了一下翻译,加了些详细注释供大家参考,对大家有帮助就ok了,如有解释错误谢谢提出。 以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢: j...

原创日历Jquery插件

  • 2013-03-19 13:27
  • 65KB
  • 下载

jquery插件实现手风琴效果!

手风琴的效果 $(document).ready(function (){ // var option = { hrader: "h3",s}; [{},{},{}]; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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