2015-08-17 2 views
1

Я хочу, чтобы изменить значение, когда пользователь, выбирающий DateRange,Как я могу установить значение по выбору, не нажимая кнопку Применить

Если пользователь оставить всплывающее окно и забудьте нажать кнопку применить,

ценность должна сохраняться без потери.

Как я мог бы сделать это, спасибо ~

Javascript

:javascript 
    $(document).ready(function() { 
    var days_of_week =$.parseJSON('#{escape_javascript(t('date.abbr_day_names').to_json)}'); 
    $('#date-range-picker').daterangepicker(
     { 
     locale: { 
      daysOfWeek: days_of_week, 
      applyLabel: "#{escape_javascript t('date_range_picker.apply')}", 
      cancelLabel: "#{escape_javascript t('date_range_picker.cancel')}", 
      fromLabel: "#{escape_javascript t('date_range_picker.depart_date')}", 
      toLabel: "#{escape_javascript t('date_range_picker.return_date')}", 
     }, 
     format: 'YYYY/MM/DD', 
     dateLimit: { days: 30 } 
     }, 
     function(start, end, label) { 
     console.log(start.toISOString(), end.toISOString(), label); 
     } 
    ); 
    }); 

ответ

0

Я не мог найти подходящий объект для просмотраВыберите, например, выбор даты jQuery ui имеет http://api.jqueryui.com/datepicker/#option-onSelect (что я также рекомендую использовать), но я могу показать вам взломанный пример, чтобы заставить его работать, если вы настроены на использование daterangepicker.

// when a start date is clicked 
$('.calendar.left .available').click(function(e) { 

    // get the changed date from the input field on the calendar 
    var selectedStartDate = $('[name="daterangepicker_start"]').val(); 

    // get current range to modify 
    var currentRange = $('[name="daterange"]').val(); 

    // set new range value 
    $('[name="daterange"]').val(rangeFromNewStart(selectedStartDate, currentRange); 

    // close the dialog 
    $('.daterangepicker').css('display', 'none'); 
}); 

function rangeFromNewStart(startValue, currentRange){ 
    startValue + ' -' + currentRange.split('-')[1]; 
}; 

Однако, как я уже говорил ранее, у вас больше гибкости при использовании jQuery ui. В дополнение к этому, это снова хакерский подход к простой проблеме. Если вы заметили, в этом примере я только показал вам, как изменить дату начала. Вам нужно будет воспроизвести эту функциональность с помощью правильного календаря, если вы хотите изменить дату окончания.