jquery插件之日历效果

原创 2012年03月29日 21:47:36


以下是需要引入的一些文件,如果没有您可以通过给定的地址进行下载,谢谢:

jquery-1.7.1.min.js                       http://jqueryui.com/

jquery-ui-1.8.18.custom.min.js      http://jqueryui.com/download

jquery.ui.datepicker-zh-CN.js     该文件在下载好的第二个文件的该目录下: jquery-ui-1.8.18.custom\development-bundle\ui\i18n\

/jquery-ui-1.8.18.custom.css     该文件在下载好的第二个文件的该目录下:  jquery-ui-1.8.18.custom\css\ui-lightness\


<!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-ui-日历效果</title>
<!--引入jquery类库文件-->
<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>
<script type="text/javascript" language="javascript" src="./js/jquery.ui.datepicker-zh-CN.js"></script>

<!--css-->
<link type="text/css" rel="stylesheet" href="./css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript">
    $(function (){
            //$.datepicker.setDefault($.datepicker.regional("zh-CN"));
            $("#datepicker,#actualDate").datepicker({
                altField:"#actualDate",
                altFormat:"DD, d mm,yy",  //以上这两是输出到另一个input框,属性值为input框的id值
                autoSize:false,    //自动调整输入框的大小
                changeMonth:false,   //如果为true代表在日历头部产生月份的下拉框
                changeYear:false,    //如果为true代表在日历头部产生距离当前年份前十年和后十年的下拉框,
                dateFormat:"yy-mm-dd",  //改变文本框中的日历时间顺序
                defaultDate:+1,  //缺省时间,相对于当前时间进行加减
                firstDay:1,    //当前年份开始的第一天
                showWeek:true, //显示当前年的周数
                //showOn:"both"
                showAnim:"explode",  //弹出日历的效果
                prevText:"上一月",
                nextText:"下一月",
                yearRange:"c-5:c+5", //年份的取值范围,
                minDate:1,
                //  maxDate:25,
                //showOtherMonths:true,  //显示除当前月份的日期 的其他月份的日期
                //selectOtherMonths:true, //是否可以选择当前月份中显示的其他月份的值
                numberOfMonths:3,    //连续显示3个月的日期,日历
                
                //===============触发图片在弹出日历=====================
                showOn:"button",   //怎样触发显示日历 分为:button   both(点击input框和button都显示日历)
                buttonImage:"./images/calendar.gif",   //设置按钮的图片
                buttonImageOnly:true,       //设置按钮只有图片,没有按钮的样式
                showButtonPanel:true,     //显示按钮 今天  和  关闭  无论出现几个日历,只出现两个按钮
                closeText:"close",
                //gotoCurrent:true
                //===================事件================
                onSelect:function (dateText,inst){   //参数1:被选中的时间   参数2dom对象
                        //根据开始时间设置结束时间必须大于等于这个时间
                        var option = this.id == "from" ? "minDate" : "maxDate",
                    instance = $( this ).data( "datepicker" ),
                    date = $.datepicker.parseDate(
                        instance.settings.dateFormat ||
                        $.datepicker._defaults.dateFormat,
                        dateText, instance.settings );
                    dates.not( this ).datepicker( "option", option, date );
            
                    }
            });            
                    
        });    
</script>
</head>

<body>
    <!--
        jquery  ui使用前提
            第一步:引入类库文件
                    包括:
                        js类库
                        css样式类库
            第二步:模拟实现          
    -->
    <div>jquery--实现日历</div>
  活动开始日期: <input type="text" id="datepicker" />
  活动结束日期: <input type="text" id="actualDate">  
</body>
</html>



根据上面的日期,进行的改动,下次输入只能对上次日期之后的日期进行操作




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

相关文章推荐

用jQuery写个简单的日历组件

说到日历组件,网上一搜一大堆,各种插件啊、集成框架啊实在不少。但是插件有的不合需求,框架嘛依赖关系一大堆,比如jQueryUI、bootstrap等。其实现在我就是想要一个轻量级的日历组件,功能也不需...

jquery制作一个简单的日历

jquery是用的是2.0版本。 1、html代码 显示详细签到详情 * { margin: 0px; padding: 0px; font-size: 14px; ...

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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...

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

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

原创日历Jquery插件

  • 2013年03月19日 13:27
  • 65KB
  • 下载

jquery插件 日历的应用详解

日历 datepicker 在页面开发中,经常遇到需要用户输入日期的操作。通常的操作是提供一个文本框,这样的操作不方便,影响用户的体验,如果使jquery插件中的日历,这些问题就会迎刃而解。 常用...

jQuery插件实战之fullcalendar(日历插件)Demo

jQuery的插件非常多,应用的场景也非常丰富,今天我这里给大家介绍一款非常实用的日历页面开发插件 - fullcalendar,目前最新版本是1.5.1,使用这款插件能够快速帮助你快速编程实现基于w...

jQuery插件之日历插件

在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框(text),让用户输入,然后,编写代码验证输入的数据,检测其是否是日期类型。这样比较麻烦,同时,用户输入日期的操作也不是很方...
  • w_l_j
  • w_l_j
  • 2012年03月27日 20:08
  • 2416
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件之日历效果
举报原因:
原因补充:

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