双日历日期选择控件

近期,需要在项目里使用日历,经过多方选择,最后决定使用 daterangepicker  (http://www.daterangepicker.com),代码下载地址 https://github.com/dangrossman/bootstrap-daterangepicker

但是,该控件是一个日期范围选择控件,使用singleDatePicker 可以变成单日期选择控件,但是只显示一个日期。

看了一下源代码,主要是在 daterangepicker.js 的有一段代码,注释掉即可:如下

 if (this.singleDatePicker) {

           // this.container.addClass('single');
           // this.container.find('.calendar.left').addClass('single');
            //this.container.find('.calendar.left').show();
           // this.container.find('.calendar.right').show();
            this.container.find('.daterangepicker_input input, .daterangepicker_input i').hide();
            //if (!this.timePicker) {
             //   this.container.find('.ranges').hide();
            //}
        } 

test.html页面为

    <input type="text" id="demo"/>

    <script>

        $('#demo').daterangepicker({
            "singleDatePicker": true,
            "autoApply": true,
            "locale": {
                "format": "YYYY-MM-DD",
                "separator": "-",
                "applyLabel": "Apply",
                "cancelLabel": "Cancel",
                "fromLabel": "From",
                "toLabel": "To",
                "customRangeLabel": "Custom",
                "daysOfWeek": [
                    "",
                    "",
                    "",
                    "",
                    "",
                    "",
                    ""
                ],
                "monthNames": [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                "firstDay":1
            } 
        } );


    </script>

运行效果如下:

所有代码下载地址 http://files.cnblogs.com/files/mqingqing123/bootstrap-daterangepicker-master.rar

运行 test.html即可

Js日历控件,在一个网页上同时显示两个日期选择器,写成了封装类,方便使用者调用。同时美化的相当不错。   包括了以下函数:   1、2012——2020年节假日信息(包括节假日前1~3天/后1~3天)   2、格式化数字,不足两位前面补0   3、将日期对象/日期字会串格式化为指定日期字符串   4、将日期字符串格式化为数字   5、获取目标元素针对于文档的位置   6、元素选择器   7、查找元素位置   8、判断目标元素是否包含指定的className      关于一些日历调用的参数说明:Calendar({    id: "#J_date_1", //触发显示日历元素ID    isPopup: !0, //弹出式日历    isPrevBtn: !0, //显示上月按钮    isNextBtn: !0, //显示下月按钮    isCloseBtn: !0, //显示关闭按钮    isHoliday: !0, //节假日特殊显示    isHolidayTips: !0, //显示节假日1~3天/后1~3天信息    isDateInfo: !0, //显示日期信息    isMessage: !0, //有日历提示信息    isCalStart: !0, //标记为开始时间    dateInfoClass: "date-info-start", //开始时间icon样式    range: {mindate: "2011-09-01", maxdate: "2020-12-31"},//限制范围(当天——2020-12-31)    count: 2, //日历个数    monthStep: 1, //切换上下月日历步长    onSelectDate: fnSelectDate, //选择日期回调方法    onClose: fnClose //关闭日历回调方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值