daterangepicker

examples

by Shuaib Khan

HTML

<script src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css">
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<h3>日期范围选择器</h3>

<p>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.</p>
<p>为文本框绑定日期范围选择器，将使用文本框的当前值进行初始化。如果选择新日期，则更新文本输入框的值。</p>

<p>示例:</p>
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />

<h3>日期和时间</h3>

<p>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.</p>
<p>日期范围选择器也可用于选择时间。 在日历下方添加了小时，分钟和秒（可选）的下拉列表。 通过一个存在的选项，设置分钟下拉列表的步长。（例如：只提供15分钟或30分钟的增量。）</p>

<p>示例:</p>
<input type="text" name="daterange" value="01/01/2015 1:30 PM - 01/01/2015 2:00 PM" />

<h3>单个日期选择器</h3>

<p>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.</p>
<p>日期范围选择器可以变成一个日历选择器小组件，仅有一个日历。 在这个例子中，选择月份和年份的下拉列表在日历顶部启用，选择后可以快速跳到不同的月份。</p>

<p>示例:</p>

<input type="text" name="birthdate" value="10/24/1984" />

<h3>自定义范围</h3>

<p>This example shows the option to predefine date ranges that the user can choose from a list.</p>
<p>这个示例显示了用户可以从列表中选择的预定义日期范围的选项。</p>

<p>示例:</p>

<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;
   ...

JavaScript

$(function() {
		// 日期范围选择器
    $('input[name="daterange"]:eq(0)').daterangepicker();
    
    // 日期和时间
    $('input[name="daterange"]:eq(1)').daterangepicker({
        timePicker: true,
        timePickerIncrement: 30,
        locale: {
            format: 'MM/DD/YYYY h:mm A'
        }
    });
    
    // 单个日期选择器
    $('input[name="birthdate"]').daterangepicker({
        singleDatePicker: true,
        showDropdowns: true
    }, 
    function(start, end, label) {
        var years = moment().diff(start, 'years');
        alert("You are " + years + " years old.");
    });
    
    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')]
        },
        isCustomDate: function(){
        	return 'gewg';
        }
    }, cb);

    cb(start, end);
    
    // 文本框初始化为空
    $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
  console.log("Hello")
      $(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('');
  });
});