在“日期范围”中仅选择开始日期,并将“结束”设置为+7天(引导程序日期范围选择器)

时间:2018-10-15 16:14:38

标签: javascript twitter-bootstrap daterangepicker bootstrap-daterangepicker

当您在日期范围选择器中单击开始日期时,我试图触发一个事件,到目前为止,我已经尝试了几种方法: HTML:

 <input class="form-control pull-right" type="text" name="daterange" id="dateRangeP" >

JavaScript

$(function () {
        $('input[name="daterange"]').daterangepicker({
            locale: {
                format: 'DD-MM-YYYY'
            }
        });

        $('input[name="daterange"]').click(function () {
            debugger;
            var startDate = $("#dateRangeP").data('daterangepicker').startDate._d.toLocaleDateString('en-GB');

            var endDate = moment(startDate, "DD-MM-YYYY").add(7, 'days')._d.toLocaleDateString('en-GB');

            $("#dateRangeP").data('daterangepicker').setStartDate(startDate);
            $("#dateRangeP").data('daterangepicker').setEndDate(endDate);
            debugger;
            $(this).val(startDate + '-' + endDate);
            console.log($(this).val());
        });
    });

目前,当您在框外单击时可以使用,但是单击开始日期时需要它。我尝试使用change函数在下面调用,但是它仅在选择了Apply按钮并且选择了两个日期之后才有效

$('#dateRangeP').on('apply.daterangepicker', function(ev, picker) {
alert ('hello');

});

在这里发布之前,我已经进行了很多搜索,但是似乎找不到任何指导,因此非常感谢您提供一些指导。如果不清楚,请告诉我。

提琴:http://jsfiddle.net/40cwdk7h/1/

2 个答案:

答案 0 :(得分:1)

尝试一下... dateLimit: { days: 7 }

$(function() {
    $('input[name="daterange"]').daterangepicker({
        dateLimit: { days: 7 },
        locale: {
            format: 'MM/DD/YYYY '
        },

    });

});

链接https://jsfiddle.net/rLnycn80/1845/

答案 1 :(得分:0)

Yes, that function is only called when you clicked on apply button. 
For setting a dynamic end date at runtime used two datepicker instead of daterangepicker.

小提琴链接:https://jsfiddle.net/kartik_bhalala/2euar7d3/19/