HTML5 日期含代碼

    HTML5 – 日期

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

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

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

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

    除了日期輸入框之外,還有時(shí)間輸入框,它們的標(biāo)簽分別是 <input type="time"><input type="datetime-local">。愛掏網(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í)間選擇器。愛掏網(wǎng) - it200.com

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

    <label for="start">開始日期:</label>
    <input type="date" id="start" name="start" min="2022-01-01" max="2022-12-31">
    

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

    自定義日期輸入框樣式

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

    <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è)性化輸入框。愛掏網(wǎng) - it200.com您可以進(jìn)一步自定義樣式以適應(yīng)你的網(wǎng)站設(shè)計(jì)。愛掏網(wǎng) - it200.com

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

    為了獲取和設(shè)置日期輸入框的值,您可以使用 JavaScript。愛掏網(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)聽了輸入框的 change 事件,并在值改變時(shí)打印出日期。愛掏網(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 日。愛掏網(wǎng) - it200.com

    結(jié)論

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

    聲明:所有內(nèi)容來自互聯(lián)網(wǎng)搜索結(jié)果,不保證100%準(zhǔn)確性,僅供參考。如若本站內(nèi)容侵犯了原著者的合法權(quán)益,可聯(lián)系我們進(jìn)行處理。
    發(fā)表評(píng)論
    更多 網(wǎng)友評(píng)論0 條評(píng)論)
    暫無評(píng)論

    返回頂部

    主站蜘蛛池模板: 亚洲AV无码一区二区三区久久精品| 暖暖免费高清日本一区二区三区 | 国产三级一区二区三区| 日韩国产免费一区二区三区| 亚洲AV香蕉一区区二区三区| 国产另类ts人妖一区二区三区| 日韩精品一区二区三区四区| 亚洲另类无码一区二区三区| 日本一区二区三区爆乳| 精品成人一区二区三区免费视频| 无码中文字幕一区二区三区| 国产aⅴ一区二区| 少妇人妻偷人精品一区二区| 国偷自产视频一区二区久| 中文字幕一区一区三区| 国产一区在线视频观看| 久久国产精品一区| 在线欧美精品一区二区三区 | 日韩伦理一区二区| 亚洲一区二区精品视频| 日韩一区二区三区射精| 一本色道久久综合一区| 精品免费国产一区二区三区| a级午夜毛片免费一区二区| 亚洲综合无码一区二区痴汉| 丰满人妻一区二区三区视频53 | 中文无码AV一区二区三区| 人妻体内射精一区二区三区| 国产一区二区视频在线播放| 亚欧免费视频一区二区三区| 秋霞无码一区二区| 一区二区三区免费在线视频| 精品香蕉一区二区三区| 国产亚洲3p无码一区二区| 中文字幕一区二区三区乱码| 无码精品不卡一区二区三区| 精品久久久久久中文字幕一区| 国产丝袜美女一区二区三区| 精品一区二区三区无码视频| 中文字幕AV无码一区二区三区| 亚洲AV综合色区无码一区 |