基于jQuery的双日历(推荐)

所属分类:输入-日期和时间

 63767  497  查看评论 (90)
分享到微信朋友圈
X
基于jQuery的双日历(推荐) ie兼容6

step1:先引入js文件和样式文件

<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./dateRange.js"></script>
<link rel="stylesheet" type"text/css" href="./dateRange.css"/>

 

step2:放置选择器触发器和显示容器,并在你需要的地方实例化日期选择器对象如:

<div id="div_date_demo3"> 
    <span id="date_demo3"></span> 
    <a id="input_trigger_demo3" href="#"> <i></i> </a> 
</div>
<div id="datePicker"></div>
<br/>
<script type="text/javascript">
                var dateRange = new pickerDateRange('date_demo3', {
                    isTodayValid : true,
                    startDate : '2013-04-14',
                    endDate : '2013-04-21',
                    defaultText : ' 至 ',
                    inputTrigger : 'input_trigger_demo3',
                    theme : 'ta',
                    success : function(obj) {
                        //自定义的回调函数 callback();
                    }
                });
</script>


相关插件-日期和时间

jQuery时间范围选择插件dateRange.js(修正版!)

此插件原来不能选择当前日期(今天的日期)
  日期和时间
 46587  334

时间插件lhgcalendar

lhgcalendar是一功能强大的简单迷你并且高效的弹出日历组件,基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+.
  日期和时间
 51014  355

移动端日期滚动选择插件mobisscroll3.0完整版

mobiscroll是个很好用的jQuery日期插件,它可以实现在移动端滚动选择日期。
  日期和时间
 46352  395

jQuery手机端酒店日历插件

一款简单的手机端日历插件,可以选择入住和离店日期,控制选择天数
  日期和时间
 43650  360

讨论这个项目(90)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    前尘忆梦 0
    2018/5/24 10:06:45
    怎么解决月份选择器有2个月份的,比如说需要2018-3 至 2018-9 ,这样子怎么设置啊? 回复
    王庭辉 0
    2017/11/1 11:36:48
    双日历为什么在响应式里边,点击inpunt框后,会出现日历不断往左偏移的情况?求大神指点
        ??????0
        2017/12/11 9:29:44
        已解决,私聊,897829460
        王庭辉0
        2017/12/11 9:31:59

        好的,谢谢。

    回复
    ITLiuQing 0
    2017/10/27 11:04:21

    场景:已经实现一个单日历,

    var dateRange2 = new pickerDateRange('date2', {
        isTodayValid: true,
        startDate: '2017-06-18',
        //	endDate : '2012-10-16',
        calendars: 1,
        isSingleDay: true,
        defaultText: ' 至 ',
        inputTrigger: 'input_trigger2',
        theme: 'ta',
        success: function(obj) {
            $('#date2').html(obj.startDate)
            alert('渲染图表');
        }
    });

    现在只要点击单日历的日期的时候,就会触发alert,想实现,点击不触发,点击确定才触发,哪位大神知道,指点一下,谢谢,在线等

    但是想实现点击日期不触发回调函数,点确定才触发,而现在是点击日期和点击确定都触发

        右手边的吊兰花0
        2018/4/13 9:51:26
        请问这个问题你解决了吗?
    回复
    首и点 0
    2017/10/24 11:34:22
    怎么只让选择当前日期前一个月的日期啊,超出的日期灰掉不让选择
        I Waiting y0
        2018/1/29 15:21:38

        你好,请问问题解决了吗

    回复
    ITLiuQing 0
    2017/10/16 16:14:14

    各位大神们,如果想设置最近一个月或者最近半个月,怎么设置?有设置过的吗?在线等

        琳琳0
        2018/1/13 15:04:55

        你的问题解决了吗

    回复
    努力吧孩子 0
    2017/9/2 11:54:13

    说明文档在哪???找不到

        ITLiuQing0
        2017/10/27 10:51:32

        js里面的注释啊

    回复
    时光 0
    2017/8/29 9:24:14
    插件很好用我看完文档有一个没弄明白的地方     当选择:单日日期时 “isSingleDay : true,”      页面的text框里面还是显示“2017-02-03 至 2017-02-03”    这种样式在区间选择效果很好。   但是选择单日期时怎么才能只显示  “2017-02-03”   在线等
        D。0
        2017/8/30 15:58:58

        加一个   calendars:1

        ITLiuQing0
        2017/10/27 10:54:33

        加一个   calendars:1 后,想实现点击日期不触发回调函数,点确定才触发,而现在是点击日期和点击确定都触发

        メ潇潇★0
        2018/4/13 9:45:39
        加calendars:1 还是出现 ***至*** , 还需要配置什么吗?
    回复
    新つ开始 0
    2017/8/10 17:08:30

    有谁知道如何获取当前选择的时间吗,或者说开始和结束的时间,我想算这个范围一共有几天

        Pulverize0
        2017/8/16 16:32:09

        兄弟解决了吗?

    回复
    2943785277 0
    2017/7/28 11:54:15

    请问下  这个插件 怎么在  每次点开的时候 初始化一次   我要清空上一次的日期  

    回复
    .... 0
    2017/6/7 16:45:45

    我想问一下为什么不能选择到当天的日期只能选择到前一天的呢?急

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复