HTML input type = date Функция Javascript

Question

Мне интересно, есть ли простой способ рассчитать, как долго длится событие с двумя простыми вводами даты в формате HTML.

Скажем, у меня есть эта форма:

<form> 
    <input type="date" id ="select5"> 
    <input type="date" id="select5"> 
</form> ` 

Какого переменный я использую в своем яваскрипте функции сказать событие длится 10 дней или 20 дней в зависимости от пользовательского ввода. Надеюсь, я не слишком неясен. Большое вам спасибо за помощь, Andre!

Answer 1

Чтобы сделать это, вы должны:

1. Определить, если хост поддерживает ввод даты типа. Если нет, вы должны реорганизовать ввод, чтобы отобразить формат даты, ожидаемый в качестве подсказки экрана.

2. Даже если поддерживается дата ввода данных, браузеры позволят ввести недопустимые значения (например, Chrome разрешает 31 февраля), так что вы должен проверить значение.

После того, как пользователь предоставил значения сверяются даты и объекты были созданы:

1. вычтите одну дату из другой
2. разделить на количество миллисекунд, в течение одного дня
3. круглый результат для внесения изменений при переходах на летнее время

Стат с подходящими разметки, а затем добавить скрипт. Надеюсь, комментариев достаточно, если нет, просьба уточнить.

// Set parameter for support of input type date 
 
var supportsTypeDate = (function(){ 
 
    var el = document.createElement('input'); 
 
    el.setAttribute('type', 'date'); 
 
    el.value = '2016-31-01'; // Invalid date value 
 
    return el.type == 'date' && el.value != '2016-31-01'; 
 
}()); 
 

 
window.onload = function() { 
 
    // If date is supported, remove screen tip 
 
    if (supportsTypeDate) { 
 
    Array.prototype.forEach.call(document.querySelectorAll('.dateScreenTip'), function(el) { 
 
\t el.style.display = 'none'; 
 
\t }) 
 
    } 
 
} 
 

 
// Parse and validate date in format dd/mm/yyyy 
 
function parseDMY(s) { 
 
    var b = s.split(/\D/); 
 
    var d = new Date(b[2], --b[1], b[0]); 
 
    return d && d.getMonth() == b[1]? d : new Date(NaN); 
 
} 
 

 
// Parse and validate a date in format yyyy-mm-dd 
 
// Note that a date without a timezone is treated as LOCAL since 
 
// the HTML spec is consistent with ISO 8601 
 
function parseISODate(s){ 
 
    var b = s.split(/\D/); 
 
    var d = new Date(b[0], --b[1], b[2]); 
 
    return d && d.getMonth() == b[1]? d : new Date(NaN); 
 
} 
 

 
function calcDays() { 
 

 
    // Get values 
 
    var startDate = document.getElementById('startDate').value; 
 
    var endDate = document.getElementById('endDate').value; 
 
    
 
    // Parse to Date objects depending on whether 
 
    // input type Date is supported 
 
    if (supportsTypeDate) { 
 
    startDate = parseISODate(startDate); 
 
    endDate = parseISODate(endDate); 
 
    } else { 
 
    startDate = parseDMY(startDate); 
 
    endDate = parseDMY(endDate); 
 
    } 
 

 
    // Display error messages if invalid input 
 
    document.getElementById('startDateErr').innerHTML = +startDate? '' : 'Please insert a valid start date'; 
 
    document.getElementById('endDateErr').innerHTML = +endDate? '' : 'Please insert a valid end date'; 
 
    
 
    // Get difference in days. If either date is invalid, show empty result 
 
    // Use Math.round to remove any daylight saving changeover effects 
 
    var daysDiff = ''; 
 
    if (+startDate && +endDate) { 
 
    daysDiff = Math.round((endDate - startDate)/8.64e7); 
 
    } 
 
    document.getElementById('daysDiff').value = daysDiff; 
 
}

<form> 
 
    <br> 
 
    <label for="startDate">Start date<input type="date" class="dateInput" id="startDate"></label> 
 
    <span class="dateScreenTip">dd/mm/yyy</span><span class="errMsg" id="startDateErr"></span> 
 
    <br> 
 
    <label for="endDate">End date<input type="date" class="dateInput" id="endDate"></label> 
 
    <span class="dateScreenTip">dd/mm/yyy</span><span class="errMsg" id="endDateErr"></span> 
 
    <br> 
 
    <label for="daysDiff">Days difference<input readonly id="daysDiff" name="daysDiff"> 
 
    <br> 
 
    <input type="button" onclick="calcDays()" value="Calculate days difference"> 
 
    <input type="reset"> 
 
</form>

выше предназначено быть просто демонстрация того, что участвует, есть намного больше работы, чтобы реализовать его, как качество производства кода.

Это можно упростить, попросив пользователей ввести формат yyyy-mm-dd для введенных вручную дат, однако, вероятно, более удобно использовать более знакомые d/m/y.

Answer 2

Используйте momentjs чтобы рассчитать стоимость доставки между двумя датами.

Этот пример дает разницу в днях с использованием asDays(). Вы можете заменить этот метод для одного из многих методов в momentjs docs, например asHours()

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <script src="http://momentjs.com/downloads/moment.min.js"></script> 
</head> 
<body> 
    <form> 
    <input type="date" id="start" onchange="getEventTime()"> 
    <input type="date" id="end" onchange="getEventTime()"> 
    </form> 
    <script> 
    var getEventTime = function(){ 
     var start = moment(document.getElementById("start").value); 
     var end = moment(document.getElementById("end").value); 
     console.log(moment.duration(end.diff(start)).asDays()); 
    } 
    </script> 
</body> 
</html>