Рассчитать разницу в дате в jQuery

Question

Вопрос в том, в моем приложении есть 2 поля, одна - дата (поле1), а вторая - метка (поле 2). Поэтому я хочу, чтобы, когда пользователь выбирает дату в поле 1, поле 2 должно автоматически заполняться (текущая дата - дата из поля 1). Может ли кто-нибудь помочь в его реализации.

Я использую JQuery для отображения даты:

// This displays the date dialog when user clicks on Field1 
$('#Field1').click(function() { 
    $('#Field1').simpleDatepicker(); 
}); 

// Tried following code but it didn't worked 
$('#Field1').click(function() { 
    $('#Field1').simpleDatepicker({ 
     onSelect: function() { 
     $('#Field2').value(calculateDays($('#Field1').toString)) 
     } 
    }); 
}); 

function calculateDays(dateString) { 
    var today = new Date(); 
    var inputDate = new Date(dateString); 
    var days = today - inputDate; 
    return days; 
}; 

Это может выглядеть жалким код для некоторых людей, но я просто новичок, так что любые предложения/комментарии приветствуются.

Также скажите, пожалуйста, если это можно сделать только с помощью html и не нужно переходить в jQuery. Я понимаю, что код вычисления времени (разница между датами) будет идти в jQuery, так как это нужно уволить после выбора даты (событие onSelect). Пожалуйста, исправьте, если неправильно.

Answer 1

Я не уверен, но это:

$('#Field2').value(calculateDays($('#Field1').toString)) должно быть так:

$('#Field2').value(calculateDays($('#Field1').val())) или $('#Field2').value(calculateDays($('#Field1').text()))

Answer 2

Вот решение для установки такой же даты во втором поле. Ссылка: jquery: using two datepicker with two fields (field 1 , field2 + 1 day) like booking.com Измените формат в соответствии с вашими нуждами.

Answer 3

Я предполагаю, что вы пытаетесь использовать Karl Seguin's jquery.simpleDatePicker (он пришел сверху при поиске «simpledatepicker» в Google).

Как Джимбо замечания в комментариях, это трудно посоветовать на подходе MVC здесь - вы говорите, что вы хотите сделать это чисто с HTML, но HTML сами по себе не может диктовать поведение (я бы сказал, что это чрезвычайно ООН -MVC). Формы HTML5 do допускают некоторые ограничения поведенческого контроля (валидация и т. Д.), А также предлагают <input type="date"/>, но ни одна из них не помогает вашей ситуации.

Так что для этого ответа я просто хочу, чтобы исправить ошибки в коде:

1. плагин инициализируется с помощью метода simpleDatePicker Jquery - Вы забыли капитализировать «P»;
2. Сам плагин обслуживает событие click. Вы должны инициализировать его напрямую, не дожидаясь ввода пользователя;
3. В исходном коде не было Параметр инициализации в исходном коде: я решил использовать прослушиватель событий change на входе для его захвата;
4. Вы используете метод jQuery value - это родной DOM Javascript - вместо этого вы должны использовать val;
5. toString не будет работать с элементами DOM или объектами jQuery - снова используйте метод val;
6. Собственный объект Date не может анализировать даты в произвольных форматах - и ваш код не создавал бы несколько дней, если бы это произошло (это просто произвело бы разницу в миллисекундах). Для такой функциональности вы должны использовать хорошую библиотеку дат: я выбрал Moment.

Результирующий код (as demonstrated here):

$('#Field1') 
    .simpleDatePicker() 
    .on('change', function passValue(){ 
     $('#Field2').val(calculateDaysFromNow($('#Field1').val())) 
    }); 

function calculateDaysFromNow(dateString){ 
    return moment.duration(moment(dateString,'MMM DD YYYY').diff()).days(); 
} 

Немного прокомментировав, как я использовал момент:

Прежде всего, мы хотим разобрать #Field1 «S отформатированные дату фактическая дата количественного объект:

moment(dateString,'MMM DD YYYY') 

Далее мы хотим diff erenti съел это отныне. Как дата, момент предполагается сейчас, если мы не передаем никакого аргумента:

moment(dateString,'MMM DD YYYY').diff() 

Мы не хотим этого в качестве даты, но, как продолжительность, так что мы будем передавать его duration метода секундного:

moment.duration(moment(dateString,'MMM DD YYYY').diff()) 

... и, наконец, мы хотим, чтобы это выражается в днях:

moment.duration(moment(dateString,'MMM DD YYYY').diff()).days()