jQuery Birthday插件可以幫助我們創建一個美觀的日期選擇器,它特別適合用于生日的選擇。
// 引入jQuery庫 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> // 引入jQuery Birthday插件 <link rel="stylesheet" href="jquery.birthdaypicker.min.css"> <script src="jquery.birthdaypicker.min.js"></script> // 使用插件 $(function() { $('#birthday').birthdaypicker({ dateFormat: 'bigEndian', monthFormat: 'long', placeholder: false, ageSelector: true, hiddenDate: true }); });
在上面的代碼中,我們先引入了jQuery庫和jQuery Birthday插件。然后,在document ready事件中,我們調用了birthdaypicker()函數,并傳入一些選項作為參數。
這些選項包括dateFormat,用于設置日期的顯示格式;monthFormat,用于設置月份的顯示格式;placeholder,用于設置是否顯示占位符;ageSelector,用于啟用年齡選擇器;hiddenDate,用于隱藏日期輸入框,只顯示年齡選擇器。
最后,我們將這個日期選擇器綁定到一個ID為birthday的輸入框上。用戶在該輸入框中選擇生日后,插件會自動將生日的日期格式化并填入該輸入框中。
如果您需要一個美觀的生日日期選擇器,那么jQuery Birthday插件是一個很不錯的選擇。
上一篇合并行、列css
下一篇同一頁面實現多種css