jquery - 在 Jquery 中计算特定日期将落在哪一天？

Question

我希望能够输入任何日期，即 1/17/2019(MM/DD/YYY 格式)并计算将使用 jQuery 的星期几。我尝试编写一些基本功能，但我的代码非常糟糕，因为我只是在学习 jQuery。我希望我的输出看起来像“那个日期将是(星期几)，(选择的月份)，年”所以，如果输入的日期是 2019 年 1 月 17 日，输出将显示为“那个日期是 1 月 17 日星期四2019”

目前，我有两个字段供用户输入年份，#yearField 是年份的前两位数字，#centuryField 是年份的最后两位数字(我需要更好的命名约定，我知道)和一个选择框，允许用户从列表中选择月份。我也不确定如何将用户输入的月份解析为数字，即“January”= 1“February”= 2 等。

<script>
setup = function() {
calc = function() {
    // alert("Hey there!");
    // var tip = document.getElementById("checkField").value * 0.20;
    // document.getElementById('tipArea').innerHTML = "The tip is $" + tip;


    var year = $("#yearField").val();
    var century = $("#centuryField").val();
    var level = $("#monthSelect").val();
    var day = $("#dateField").val() + $("#yearField").val() + ($("#yearField").val() * .25) + ($("#centuryField").val() * .25) - ($("#centuryField").val() * 2) ; 





    var message = "That date will be " + $("#monthSelect").val() + " " + day + " " + year + century;
    $("#displayArea").html(message).css("color", "blue").css("font-size", "50px");

}


$("#calcButton").click(calc);

}

$(document).ready(setup);

</script>

目前，当用户输入日期“100”，#yearField 为“20”，#centuryField 为“19”时，输出“That date will be January 1002016.75 2019”

Answer 1

您可以通过传入值 year, month, day 来创建 JavaScript Date 对象。请注意，您必须从月份开始 -1，因为月份与 JavaScript 中的大多数内容一样，以 0 开头。 (一月 = 0，十二月 = 11)

获得日期后，您可以使用 Date.toLocaleString()，它允许您传递带有格式设置偏好的 options 对象。

$("#btnGetDate").on("click", function() {
  //Get values from the inputs
  var year = $("#txtYear").val();
  var month = $("#ddlMonth").val();
  var day = $("#txtDay").val();

  //Format the date and output it
  var formattedDate = formatDate(year, month, day);
  console.log(`Your date is ${formattedDate}`);
});

function formatDate(year, month, day) {
  //Create a Date object using the values
  var date = new Date(year, month - 1, day);

  //Define how you want the date to be formatted
  var options = {
    weekday: "long",
    year: "numeric",
    month: "long",
    day: "numeric"
  };

  //Format the date according to our options
  return date.toLocaleDateString("en-US", options);
}

input,select {margin-right: 10px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Month
<select id="ddlMonth">
  <option value="01">January</option>
  <option value="02">February</option>
  <option value="03">March</option>
  <!-- and so on... -->
</select>

Day
<input id="txtDay" type="number" placeholder="dd">

Year
<input id="txtYear" type="number" placeholder="yyyy">

<button id="btnGetDate">Output Date</button>

当然，这可以在输入无效日期、以不正确的格式输入日期或年份等方面使用一些护栏/验证，但是我会把这部分留给你!