Дата Диапазон Подборщик Плагин Формат даты Выпуск

Question

У меня возникла проблема, когда плагин Date Range Picker (через moment.js) преобразует мой формат даты с (MM/DD/YYYY) в формат даты Unix.

Чтобы воссоздать проблему, я создал скрипку. В Fiddle нажмите на диапазон дат и отобразится сборщик. В подборщике выберите диапазон дат и нажмите «применить». Когда вы это сделаете, вы заметите, что формат диапазона дат теперь находится в формате Unix.

Как преобразовать формат даты в «MM/DD/YYYY», когда я нажимаю «Apply»?

HTML

<div id="daterange"><span></span></div> 

Jquery

$(function() { 
    var listItem, applyClicked = false, 
     start = '10/10/2016', 
     end = '12/05/2016'; 

    function cb(start, end) { 
     $('#daterange span').html(start + ' - ' + end); 
    } 

    //var num = $("#daterange").data("datepicker"); 
    //cb(moment().subtract(num, 'days'), moment()); 

    $('#daterange').daterangepicker({ 
     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')] 
     }, 
     locale: { 
      format: 'MM/DD/YYYY' 
     }, 
     opens: "left", 
     startDate: start, 
     endDate: end, 
     maxDate: moment().endOf("day"), 
     alwaysShowCalendars: true, 
     autoUpdateInput: true 
    }, cb); 

    cb(start, end); 

    // Dont close daterangepicker immediately when predefined range selected 
    $(".ranges ul li").click(function() { 
     listItem = $(this).text(); 
    }); 

    $(".range_inputs").click(function() { 
     applyClicked = true; 
    }); 

    $('#daterange').on('apply.daterangepicker', function(ev, picker) { 
     //var test = moment.unix(startDate).format("MM/DD/YYYY"); 
     //$('#daterange span').html(test + ' - ' + end); 
     if (listItem != "Custom Range" && !applyClicked) { 
      picker.show(); 
      applyClicked = false; 
     } 
    }); 
}); 

Fiddle https://jsfiddle.net/coryspi/oka1noht/

Заранее спасибо за вашу помощь.

Answer 1

Как вы можете видеть в config documentation ваша функция центибар имеет тип:

function(startDate, endDate, label) { 

Это функция обратного вызова срабатывает от daterangepicker, когда пользователь выбирает новые даты.

Первые два аргумента являются объектами момента.

Таким образом, ваша функция становится:

function cb(start, end) { 
    $('#daterange span').html(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY')); 
} 

и вы можете назвать его в DOM готова, как:

cb(moment(start), moment(end)); 

Обновленный fiddle

Answer 2

Просто обернуть начальные и конечные значения на данный момент, а затем отформатировать его в MM/DD/YYYY:

function cb(start, end) { 
    $('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY')); 
} 

Посмотрите на рабочей скрипкой: https://jsfiddle.net/6w2m83qa/

Обратите внимание, что когда вы завернуть в данный момент, это попробовать чтобы понять, какой формат вы используете. MM/DD/YYYY работает нормально, Unix timestamp тоже.

Если ваш формат не относится ни к одному из поддерживаемых форматов, например. DD/MM/YYYY, вам необходимо указать формат ввода.

Answer 3

Заменить обратный вызов функции с этим

function cb(start, end) { 
    $('#daterange span').html(moment(start).format('MM/DD/YYYY') + ' - ' + moment(end).format('MM/DD/YYYY')); 
} 

Ее просто нужно изменить формат.

Надеюсь, это поможет.