Question

我正在为学校制作提醒式课程，目前为用户提供了一些选项。

第一个是输入提醒的名称，然后替换文本＆＃34;当前未设置＆＃34;他们的意见。 这位有效。

但是，我现在需要另一个选项来向用户显示日历，然后从中选择日期 - 然后稍微进一步，页面如何检查当前时间是否与他们选择的时间相匹配？

<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

JavaScript没有内置日历用户界面。我在script标记中看到并在您的问题中使用prompt您在浏览器中使用JavaScript：非常最新的浏览器可能会提供一个在<input type="date">字段（HTML5定义的新类型之一）上，但支持各不相同。否则，你可能会看到几百个＆＃34; datepicker＆＃34;那里的图书馆。一个例子是jQuery UI，但它只是众多流行的一个。

或者，您可以允许用户通过prompt键入日期，然后解析它。只有非常最小的日期解析内置于JavaScript本身，所以你可能再次转向像MomentJS或类似的库。

仅仅是为了一个例子，再次还有很多其他库，这里是你如何使用jQuery UI收集日期和时间并用MomentJS解析它：

＆＃13;

// 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());
});

＆＃13;

<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>

＆＃13;

还有提供日期和时间选择器的库（和＃34;插件＆＃34;到jQuery UI）。

Answer 2

使用这个jQuery插件 - Date and Time picker

示例html：

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

的javascript：

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

Javascript：如何选择日历？

2 个答案: