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>



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




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

精挑细选的10个jQuery日历插件

在本文中,小编为大家整理了10个非常有用的jQuery日历插件,为你的网站添加非常t适用的日历功能。 CLNDR.js CLNDR.js是一个可创建日历的jQuery插件,支持自定义。该插件不会生...
  • BTfan123
  • BTfan123
  • 2014年03月06日 10:24
  • 4021

利用jquery ui的datepicker开发一个课程日历

这两天在开发某商学院的网站,里面有涉及到课程的模块,客户希望在网站的首页显示一个日历,在有课程的日期加上显眼的标识,使网站用户一眼看到日历后就能知道哪天商学院有课程以便他们安排时间报名修读。    ...
  • one_and_only4711
  • one_and_only4711
  • 2013年04月12日 01:38
  • 9817

jQuery后台日历价格、库存设置Web组件

供销管理系统中,设置日历供销价、库存Web组件。基于jQuery类库开发。
  • qq_36378225
  • qq_36378225
  • 2016年10月13日 15:52
  • 3424

从零开始写一个jquery日历插件(一)

简单来说,jquery插件为扩展jquery原型对象的一个方法。编写jquery插件其实就是给jquery原型添加一个自定义的方法。我们先来看一个最简单的例子:$(“a”).attr(“href”,”...
  • a379402005
  • a379402005
  • 2017年08月01日 23:14
  • 773

jquery日历插件(2)

1、改进了调用方式,使用更加方便。 2、支持导入皮肤库,具体导入方法可以参考源码中的Calendar.loadCSS()方法。 如果要自定义皮肤,可以参考源码文件方式,在skin包中新增一个皮肤文件夹...
  • xuzengqiang2
  • xuzengqiang2
  • 2015年03月02日 11:29
  • 826

基于jquery实现日历签到功能

使用Jquery实现每日签到功能 基于jquery实现日历签到功能 jquery记事日历插件e-calendar   思路: 1、获取当月第一天是周几 2、获取当月共几天 通过获取下月的...
  • cbjcry
  • cbjcry
  • 2017年04月13日 11:13
  • 3009

jquery-ui日历插件的使用步骤

1.首先下载jquery-ui压缩包,解压导入项目中 2.引入需要的js与css文件 /resources/bootstrap/css/bootstrap.min.css" type="text/c...
  • qq_20910089
  • qq_20910089
  • 2015年12月28日 10:41
  • 1960

JQuery日历插件My97DatePicker日期范围限制

来源:http://www.penglig.com/post-71.htmlMy97DatePicker是一个非常优秀的日历插件,不仅支持多种调用模式,还支持日期范围限制。 常规的调用比较简单,如下所...
  • rentian1
  • rentian1
  • 2017年11月15日 09:21
  • 344

jQueryUI中Datepicker(日历)插件的介绍和使用

http://jqueryui.com/datepicker/ jQueryUI中Datepicker(日历)插件的介绍和使用 Datepicker插件的属性: ...
  • fjseryi
  • fjseryi
  • 2016年07月18日 15:11
  • 6787

开源,免费的移动端触摸滑动插件------swiper介绍----淘抢购时间选择加载产品

1:为什么选择swiper? 免费,开源,稳定,应用广泛。可单独使用无需jquery,也可以结合jquery一起使用。简单配置即可实现手机,平板网站的大部分触摸功能。包括焦点图,tab,触摸滑动导...
  • qianqianyixiao1
  • qianqianyixiao1
  • 2015年07月27日 16:22
  • 2803
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery插件之日历效果
举报原因:
原因补充:

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