jquery插件之日历效果

最新推荐文章于 2024-08-07 13:17:58 发布

coder_up

最新推荐文章于 2024-08-07 13:17:58 发布

阅读量5k

点赞数 1

分类专栏： jquery 文章标签： jquery插件日历 javascript input stylesheet button

本文链接：https://blog.csdn.net/wjc19911118/article/details/7409028

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

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>