日期区间选择示例

Date Range Picker

The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.

<input class="form-control" name="daterange" value="2015年1月15日 - 2015年2月15日" type="text">

<script type="text/javascript">
$('input[name="daterange"]').daterangepicker();
</script>

Date and Time

The Date Range Picker can also be used to select times. Hour, minute and (optional) second dropdowns are added below the calendars. An option exists to set the increment count of the minutes dropdown to e.g. offer only 15-minute or 30-minute increments.

<input class="form-control" name="daterange" value="2015/01/01 1:30 下午 - 2015/01/01 2:00 下午" type="text">

<script type="text/javascript">
$('input[name="daterange"]').daterangepicker({
  timePicker: true,
  timePickerIncrement: 30, 
  locale: {
    format: 'YYYY/MM/DD h:mm A' 
  }
});
</script>

Single Date Picker

The Date Range Picker can be turned into a single date picker widget with only one calendar. In this example, dropdowns to select a month and year have also been enabled at the top of the calendar to quickly jump to different months.

<input class="form-control" name="birthdate" value="1984年10月24日" type="text">

<script type="text/javascript">
$('input[name="birthdate"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true
}, function(start, end, label) {
    var years = moment().diff(start, 'years');
    alert("You are " + years + " years old.");
});
</script>

Predefined Ranges

This example shows the option to predefine date ranges that the user can choose from a list.

<div class="dropdown" id="reportrange">
  <button class="btn btn-default" type="button">
    <i class="glyphicon glyphicon-calendar"></i> 
    <span>April 3, 2017 - May 2, 2017</span>
    <i class="caret"></i>
  </button>
</div>
<script type="text/javascript">
var start = moment().subtract(29, 'days');
var end = moment();

function cb(start, end) {
    $('#reportrange > button > 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);
</script>

Input Initially Empty

If you're using a date range as a filter, you may want to attach a picker to an input but leave it empty by default. This example shows how to accomplish that using the autoUpdateInput setting, and the apply and cancel events.

<input class="form-control" name="datefilter" value="" type="text">

<script type="text/javascript">
$('input[name="datefilter"]').daterangepicker({
    autoUpdateInput: false,
    locale: {
        cancelLabel: 'Clear'
    }
});

$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});

$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
});
</script>