【问题标题】:Select only start date in Date Range and Set +7 days for End (Bootstrap Date Range Picker)在日期范围中仅选择开始日期并为结束设置 +7 天(引导日期范围选择器)
【发布时间】:2019-03-20 02:57:06
【问题描述】:

我试图在您单击日期范围选择器中的开始日期时触发一个事件,我已经尝试了几种方法并且到目前为止: 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());
        });
    });

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

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

});

我在这里发帖之前做了很多搜索,但似乎找不到任何指导,我们将不胜感激。如果不清楚,请告诉我。

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

【问题讨论】:

    标签: javascript twitter-bootstrap daterangepicker bootstrap-daterangepicker


    【解决方案1】:
    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/

    【讨论】:

    • 感谢@Kartik 到目前为止的帮助。而不是在两个文本框中显示它(我不介意这些框是否被隐藏),而是在单击日期范围内的一个后显示两个日期,以便用户知道它只显示接下来 7 天的数据?
    • 是的,用户知道在这种情况下您必须隐藏该结束日期文本框。您必须在后端使用结束日期意味着隐藏。实际上我做了动态生成的结束日期演示。您可以根据自己的要求使用它。
    【解决方案2】:

    试试这个... dateLimit: { days: 7 }

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

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

    【讨论】:

    • 感谢@Sooriya 我当时正在寻找什么
    猜你喜欢
    • 2017-10-19
    • 1970-01-01
    • 1970-01-01
    • 2016-07-15
    • 1970-01-01
    • 1970-01-01
    • 2020-06-11
    • 2017-01-18
    • 1970-01-01
    相关资源
    最近更新 更多