JavaScript日期和時間選擇器

Question

我一直在到處搜索，但似乎找不到我想要的東西。 我試圖找到一個基本的日期和時間選擇器以及使用JavaScript的時間選擇器。

我的頁面是HTML5，我知道datetime-local和time的輸入類型，但是它們不能產生正確的格式。

對於datetime-local ，日期和時間的格式為：

yyyy-mm-ddThh:mm

我正在嘗試找到一種方法來使用JavaScript將數據保存為mm-dd-yyyy hh:mm am/pm 。

該頁面很簡單，因此用戶只需填寫以上內容，然后將日期和時間存儲在要使用document.getElememtById調用的元素中

僅與時間相同，只尋找使用12小時格式的時間JavaScript，並將該值存儲在getElementById調用的元素中。

我發現像庫這樣的東西，對於這個簡單的頁面我是不需要的。

Answer 1

HTML5引入了一堆可以在傳統輸入中使用的新類型。

瀏覽器可以使用這些類型來顯示特定於上下文的鍵盤（在觸摸屏設備上），提供本機輸入驗證，並且在諸如日期之類的情況下，可以顯示本機日期選擇器。

<input type="date">

自動設定今天的日期

為了使用香草JS自動將[type="date"]輸入設置為今天的日期，我們將使用JavaScript Date()對象。

首先，我們將獲取字段（假設其ID為#today）並創建一個新的Date()對象。

var field = document.querySelector('#today');
var date = new Date();

[type="date"]字段在外觀上會有所不同，具體取決於您的住所和所用的瀏覽器（它以本地格式規范顯示日期），但是該值遵循YYYY-MM-DD格式。

我們可以從日期中獲取每個值，使用toString()將它們轉換為字符串，然后將它們連接為單個值。

• 我們將使用getFullYear()以四字符格式獲取年份。
• 我們將使用getMonth()獲取月份。
• 我們將使用getDate()獲取日期。

出於某些荒謬的原因，getMonth（）方法以數字開頭（以1（1月為0，2月為1，依此類推））返回月份。 我們需要在結果中加1以得到正確的月份。

由於它們是數字而不是字符串，因此getMonth()和getDate()都缺少單位月/日的前導零。 我們可以使用padStart()方法添加那些缺少的內容。

我們的最終結果如下所示。

field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

讓我們做一些事情：

如果支持日期輸入類型，則以我們可以隱藏的正確格式將一些輔助文本添加到我們的輸入標簽中。 添加模式屬性以針對不支持的瀏覽器進行驗證。 還要添加一個帶有模式的占位符屬性。

<label for="today">
    The Date
    <span class="description"> Please use the YYYY-MM-DD format</span>
</label>
<input
    id="today"
    type="date"
    pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" placeholder="YYYY-MM-DD"

設置日期的JavaScript不會更改，但是如果不需要，我們可以添加一些其他代碼來刪除模式，占位符和輔助文本。

// Variables
var field = document.querySelector('#today');
var date = new Date();

// If [type="date"] is supported, update the DOM
if (isDateSupported()) {

    // Remove attributes
    field.removeAttribute('pattern');
    field.removeAttribute('placeholder');

    // Remove the helper text
    var helperText = document.querySelector('[for="today"] .description');
    if (helperText) {
        helperText.parentNode.removeChild(helperText);
    }

}

// Set the value
field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2, 0) +
    '-' + date.getDate().toString().padStart(2, 0);

這是克里斯·法迪南（Chris Fardinand）的工作示例