자바 스크립트 : 캘린더 선택은 어떻게합니까?

Question

학교용 알림 프로그램을 만들고 있는데, 지금까지 사용자에게 몇 가지 옵션이 제공되었습니다.

첫 번째는 미리 알림 이름을 입력 한 다음 "현재 설정되지 않은"텍스트를 입력으로 바꿉니다. 이 비트는에서 작동합니다.

그러나 이제 다른 옵션을 사용하여 사용자에게 달력을 표시 한 다음 날짜를 선택하십시오. 그리고 나서 조금 더 나아가서 페이지가 현재 시간이 선택한 시간과 일치하는지 어떻게 확인합니까?

<script type="text/javascript"> 
function enterTime() 
{ 
    var reminder_time = //???? 
} 

function enterNew() 
{ 
    var reminder_name = prompt("Please enter the name of the reminder:") 
    document.getElementById("nameOfReminder").innerHTML = reminder_name 
} 

function warning() 
{ 
     return "Warning! Refreshing will make you lose all of your data."; 
} 
window.onbeforeunload = warning; 
</script> 

Answer 1

사용 - Date and Time picker

예 HTML :

<input type="text" name="date" class="datepicker"> 

자바 스크립트 :

당신이 [날짜]를 사용할 필요가

$('.datepicker').datetimepicker({ 
    mask:'39-19-9999 29:59:59', 
    format:'d-m-Y H:i:s' 
}); 

Answer 2

자바 스크립트에는 내장 된 달력 사용자 인터페이스가 없습니다. 브라우저에서 자바 스크립트를 사용한다는 질문에 script 태그와 prompt을 사용합니다. 매우 브라우저는 <input type="date"> 필드 (HTML5에서 정의 된 새로운 유형 중 하나)에 하나를 제공 할 수 있습니다. 지원은 다양합니다. 그렇지 않으면 수백 개의 "datepicker"라이브러리 중 하나를 볼 수 있습니다. 한 가지 예가 jQuery UI이지만 많은 사람들 중 하나 일뿐입니다.

또는 사용자가 prompt을 통해 날짜를 입력 한 다음 구문 분석하도록 허용 할 수 있습니다. 매우 자바 스크립트 자체에 최소 날짜 분석 기능이 내장되어 있으므로 MomentJS 또는 이와 유사한 라이브러리를 다시 사용할 수도 있습니다.

그냥 예를 위해서

, 다시 다른 라이브러리 거기을 많이가 , 여기 당신이 jQuery를 UI를 사용하여 날짜와 시간을 수집하고 MomentJS로 구문 분석하는 방법이다 :

// Tell jquery UI to make "#the-date" a datepicker 
 
$("#the-date").datepicker(); 
 

 
// Respond to clicks on the button 
 
$("#add-button").click(function() { 
 
    var theDate = $("#the-date").val(); 
 
    var theTime = $("#the-time").val(); 
 
    var dateObject = moment(theDate); 
 
    
 
    snippet.log("theDate (as a string): " + theDate); 
 
    snippet.log("theTime (as a string): " + theTime); 
 
    snippet.log("dateObject's default toString: " + 
 
       dateObject.toString()); 
 
});

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> 
 
<script src="http://momentjs.com/downloads/moment.min.js"></script> 
 
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<div> 
 
    <label> 
 
    Choose a date: 
 
    <input type="text" id="the-date"> 
 
    </label> 
 
</div> 
 
<div> 
 
    <label> 
 
    Choose the time: 
 
    <input type="txt" id="the-time"> 
 
    </label> 
 
</div> 
 
<div> 
 
    <input type="button" id="add-button" value="Add"> 
 
</div>

또한 라이브러리 (과의 jQuery UI에 "플러그인") 날짜 및 시간 선택기를 제공 할 수 있습니다. 이것을 jQuery 플러그인에 대한