Question

我在HTMLTwig中使用了DateRange Picker

HTML： -

<input id="date-range14" class="form-control" value="" placeholder="Select Your Week">

JavaScript： -

$('#date-range14').dateRangePicker({
            batchMode: 'week',
            showShortcuts: false,
            useCurrent: true,
            autoApply: true,
            weekStart: 0,
            autoUpdateInput: true,
            locale: {
                cancelLabel: 'Clear'
            }
        });

我想要自动选择当前周默认值。有没有解决方案？

Answer 1

您需要一些额外的span标记，示例js代码如下： Example I took from here:

＆＃13;

$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);
    
});

＆＃13;

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
    <span></span> <b class="caret"></b>
</div>

＆＃13;

Answer 2

See this working demo on jsfiddle。

说明：

使用moment.js，下面的方法将为您提供本周的开始日期

moment().startOf('isoWeek') //Monday is the week start day
moment().startOf('Week') //Sunday is the week start day

此配置将默认自动选择当前星期。

   $('#dtpFrom').daterangepicker({
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'This Week': [moment().startOf('isoWeek'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            "startDate": moment().startOf('isoWeek'),
            "endDate": moment()
        }, function (start, end, label) {
            //This is on date change event.
        });

您还可以使用online daterangepicker's config generator生成自定义配置。

自动选择DateRangePicker中的当前周

2 个答案: