JQuery를 사용하여 datetime 입력에서 동적 인 생각을 설정하는 방법은 무엇입니까?

Question

저는 코딩이 비교적 새로운데 어쩌면 기본 질문이지만 여전히 그렇습니다. 나는이 문제가있다 - 나는 2 datetime 입력 (start_date & end_date)있다. 두 번째 날짜 (end_date)는 첫 번째 날짜 이후 여야합니다 (start_ 날짜). 제한을 두어야합니다. 다음과 같은 4 가지 문제가 있습니다.

• Google에서 발견 한 모든 것은 datepicker와 관련이 있지만 사용하지 않습니다. 그래서 datetime 입력을위한 솔루션이 필요합니다.

• 사용자 입력 (시작 날짜)과 관련된 동적 솔루션이 필요합니다. 즉, 사용자가 시작 날짜를 입력하고 제한 사항으로 인해 시작 날짜 이전에 종료 날짜를 입력 할 수 없음을 의미합니다. (최소 날짜로 시작 날짜).

• 내가 알고있는 모든 JavaScript는 manualy min 값을 설정하는 것에 관한 것이지만 동적 인 입력 관련 솔루션이 필요합니다.

• 종료일을 사용 중지해서는 안됩니다.

이 점에서 나는이 문제를 해결할 방법을 모르므로 JavaScript 또는 JQuery를 추가 할 수 없으며 HTML 만 추가 할 수 있습니다. 귀하의 도움에 감사드립니다!

<input id="date1" type="datetime-local" name="start_date" onchange="getDDadmopMS()">Start Date <br /> 
<input id="date2" type="datetime-local" name="end_date" onchange="getDDadmopMS()">End Date<br /> 

Answer 1

글쎄, 나는 나를 위해 대답을 찾았다. 우아한 것이 아니라 작동하는 것. get.Time 함수를 사용하여 두 날짜의 ms 값을 가져온 다음 그 값을 나타냅니다. 결과는 새로운 분야로옵니다. 그런 다음 두 번째 함수를 사용하여 차이가 0 또는 음수 인 경우 (종료 날짜가 시작 날짜 이전임을 의미 함) 경고가 표시되는 "if 문"을 사용합니다. 여기에 코드가 있습니다. 누군가가 더 나은 대답을하면 나는 그것을 고맙게 생각합니다.

<input id="date1" type="datetime-local" name="start_date" onchange="getDDadmopMS()">Start Date <br /> 
<input id="date2" type="datetime-local" name="end_date" onchange="getDDadmopMS()">End Date<br /> 
<input id="diffms" type="text" readonly="true" placeholder="Date2 - Date1 in (ms)"/> Date2 - Date1 in (ms) <br /> 


// get Difference Date2 and Date1 in MS 
function getDDadmopMS() { 
let twoDate = new Date(document.querySelector('#date2').value); 
console.log(document.querySelector('#date1').value); 
let oneDate = new Date(document.querySelector('#date1').value); 
document.querySelector('#diffms').value = twoDate.getTime() - oneDate.getTime(); 
} 

//get Restriction 
function getRestriction() { 
var restrict = parseFloat($("#diffms").val()); 
if (restrict <=0){ 
alert('Date2 must be after Date1'); 
} 
} 

$(document).ready(function() { 
$('#date1').blur(function(event) { 
getRestriction(); 
}); 
$('#date2').blur(function(event) { 
getRestriction(); 
}); 
});