关闭

jquery插件之日历效果

标签: jquery插件日历javascriptinputstylesheetbutton
4363人阅读 评论(1) 收藏 举报
分类:


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

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>



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




1
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:517215次
    • 积分:6905
    • 等级:
    • 排名:第3450名
    • 原创:159篇
    • 转载:99篇
    • 译文:2篇
    • 评论:47条
    最新评论