HTML5 – 日期

在 HTML5 標(biāo)準(zhǔn)中，日期輸入框得到了大幅度的改進(jìn)和增強(qiáng)。愛(ài)掏網(wǎng) - it200.com現(xiàn)在，無(wú)需使用 JavaScript 選擇日期，只需在輸入框中鍵入日期即可。愛(ài)掏網(wǎng) - it200.com

最基本的日期輸入框如下所示：

<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday">

這個(gè)輸入框?qū)@示一個(gè)日期選擇器。愛(ài)掏網(wǎng) - it200.com在支持 HTML5 標(biāo)準(zhǔn)的現(xiàn)代瀏覽器上，用戶(hù)可以打開(kāi)日期選擇器并選擇日期。愛(ài)掏網(wǎng) - it200.com如果瀏覽器不支持 HTML5 標(biāo)準(zhǔn)，則該輸入框?qū)@示為文本框，用戶(hù)可以手動(dòng)輸入日期。愛(ài)掏網(wǎng) - it200.com

除了日期輸入框之外，還有時(shí)間輸入框，它們的標(biāo)簽分別是 <input type="time"> 和 <input type="datetime-local">。愛(ài)掏網(wǎng) - it200.com

<label for="appt">預(yù)約時(shí)間：</label>
<input type="time" id="appt" name="appt">

<label for="meeting">會(huì)議時(shí)間：</label>
<input type="datetime-local" id="meeting" name="meeting">

這兩個(gè)輸入框分別顯示了時(shí)間選擇器和日期時(shí)間選擇器。愛(ài)掏網(wǎng) - it200.com

另外，還有一個(gè)帶有范圍限制的日期輸入框，它允許您指定不能選擇的日期范圍。愛(ài)掏網(wǎng) - it200.com

<label for="start">開(kāi)始日期：</label>
<input type="date" id="start" name="start" min="2022-01-01" max="2022-12-31">

這個(gè)輸入框?qū)⑹冀K顯示 2022 年的日期范圍，用戶(hù)不能選擇此范圍之外的日期。愛(ài)掏網(wǎng) - it200.com

自定義日期輸入框樣式

標(biāo)準(zhǔn)的日期輸入框可能無(wú)法滿(mǎn)足所有需求。愛(ài)掏網(wǎng) - it200.com您可以使用 CSS 來(lái)自定義輸入框的外觀。愛(ài)掏網(wǎng) - it200.com下面是一個(gè)示例，采用了一些較為常見(jiàn)的自定義樣式：

<style>
  input[type="date"] {
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    padding: 8px;
    outline: none;
    height: 32px;
    font-size: 14px;
    color: #606266;
  }
</style>

<label for="eventdate">活動(dòng)日期：</label>
<input type="date" id="eventdate" name="eventdate">

樣式表將一般的輸入框樣式轉(zhuǎn)換為了具有不同背景和邊框樣式的個(gè)性化輸入框。愛(ài)掏網(wǎng) - it200.com您可以進(jìn)一步自定義樣式以適應(yīng)你的網(wǎng)站設(shè)計(jì)。愛(ài)掏網(wǎng) - it200.com

獲取和設(shè)置日期值

為了獲取和設(shè)置日期輸入框的值，您可以使用 JavaScript。愛(ài)掏網(wǎng) - it200.com以下是一個(gè)獲取日期輸入框值的示例：

const input = document.getElementById("birthday");
input.addEventListener("change", () => {
  const value = input.value;
  console.log(value); // 2022-07-31
});

這段代碼監(jiān)聽(tīng)了輸入框的 change 事件，并在值改變時(shí)打印出日期。愛(ài)掏網(wǎng) - it200.com

要設(shè)置日期輸入框的默認(rèn)值，請(qǐng)將值屬性設(shè)置為默認(rèn)日期：

<label for="birthday">出生日期：</label>
<input type="date" id="birthday" name="birthday" value="2000-01-01">

這將在日期輸入框中顯示 2000 年 1 月 1 日。愛(ài)掏網(wǎng) - it200.com

結(jié)論

HTML5 標(biāo)準(zhǔn)對(duì)日期和時(shí)間輸入框進(jìn)行了大量的增強(qiáng)和改進(jìn)，現(xiàn)在可以輕松地使用它們來(lái)選擇日期和時(shí)間。愛(ài)掏網(wǎng) - it200.com您可以通過(guò)自定義樣式表輕松地將其個(gè)性化以適應(yīng)您的設(shè)計(jì)需求。愛(ài)掏網(wǎng) - it200.com在 JavaScript 中獲取和設(shè)置日期輸入框的值也變得非常容易。愛(ài)掏網(wǎng) - it200.com