Получить значение daterangepicker начальной загрузки

Привет, я новичок в использовании javascript и столкнулся с проблемой при использовании начальной загрузки daterangepicker. Мне удалось реализовать это демо, которое я получил, но я застрял в получении значения начальной и конечной даты из JavaScript.

Это JavaScript

<script type="text/javascript">
$(document).ready(function() {
    $('#reportrange').daterangepicker(
       {
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit: { days: 60 },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: {
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          }
       },
       function(start, end) {
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));

       }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));
 });
</script>

Это кнопка, которая будет обрабатывать метод onclick

<button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>

'start' и 'end' будут содержать значения дат. Если я хочу, чтобы эти значения служили входами для последующего использования кодирования в моем проекте, например, для сохранения в базе данных, как я могу их вызвать?

Источник

5 ответов

Решение

Дайте вашей кнопке идентификатор

<button type="button" id="saveBtn" class="btn btn-primary" data-dismiss="modal">Save changes</button>

Добавьте переменные startDate и endDate в ваш скрипт

var startDate;
var endDate;

Установите эти переменные в обратном вызове daterangepicker

startDate = start;
endDate = end;

Подключите событие click для этой кнопки в вашем $(document).ready функция

$('#saveBtn').click(function(){
    console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
});

Полный JavaScript

<script type="text/javascript">
var startDate;
var endDate;

$(document).ready(function() {
    $('#reportrange').daterangepicker(
       {
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit: { days: 60 },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' to ',
          locale: {
              applyLabel: 'Submit',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom Range',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
          }
       },
       function(start, end) {
        console.log("Callback has been called!");
        $('#reportrange span').html(start.format('D MMMM YYYY') + ' - ' + end.format('D MMMM YYYY'));
        startDate = start;
         endDate = end;    

       }
    );
    //Set the initial state of the picker label
    $('#reportrange span').html(moment().subtract('days', 29).format('D MMMM YYYY') + ' - ' + moment().format('D MMMM YYYY'));

    $('#saveBtn').click(function(){
        console.log(startDate.format('D MMMM YYYY') + ' - ' + endDate.format('D MMMM YYYY'));
    });

 });
</script>
Источник 
$('#IDOfDateRangePicker').data('daterangepicker').startDate;
$('#IDOfDateRangePicker').data('daterangepicker').endDate;
Источник 
var endDate=  $("#IDOfDateRangePicker").data('daterangepicker').endDate.format('YYYY-MM-DD');

или другие форматы;

.endDate.format('YYYY-MM-DD'); 

.endDate.format('D MM YYYY');

.endDate.format('D MMMM YYYY');
Источник

Вы должны получить объект данных:

var startDate = $('#reportrange').data('daterangepicker').startDate._d;
var endDate = $('#reportrange').data('daterangepicker').endDate._d;

Обратите внимание на _d запрос в конце, чтобы получить фактический, объект даты javascript.

Кроме того, если data объект всегда undefined тогда это может быть результатом bootstrap.js быть восстановленным. Это случилось со мной на странице MVC, где я забыл окружить свои сценарии:

@region scripts {

}
Источник

daterangepicker startDate и endDate возвращает объекты момента, а не объекты даты Javascript.

Вот как можно преобразовать моментный объект в объект даты:

let startDate = moment($('#selector').data('daterangepicker').startDate).toDate();
let endDate = moment($('#selector').data('daterangepicker').endDate).toDate();
Источник

Просто, получите прямой диапазон входных данных:

$(document).ready(function(){

    $('#reportrange span').bind('DOMSubtreeModified', function(e){
        alert('New value is: '+$('input[name=daterangepicker_start]').val()+' to '+$('input[name=daterangepicker_end]').val());
    });

})
Источник

Я знаю, что это совсем не элегантно. В любом случае

Сначала мы получаем значение поля ввода daterangepicker:

var date_range = $('#date_range').val();

Теперь, если мы настроим показывать даты между '-', давайте разделимся с ним:

var dates = date_range.split(" - ");

чтобы получить даты в виде строк:

var start = dates[0];
var end = dates[1];

чтобы получить даты в виде объектов Moment в формате 'D MMMM YY':

var start = moment(dates[0],'D MMMM YY');
var end = moment(dates[1],'D MMMM YY');
Источник
Другие вопросы по тегам