iT邦幫忙

2022 iThome 鐵人賽

0
Modern Web

30天淺嘗主流前端設計系列 第 27

DAY27 JQuery UI 元件:Datepicker!!

  • 分享至 

  • xImage
  •  

DAY27 JQuery UI 元件:Datepicker!!

今天我們要繼續說明JQueryUI 方便的元件功能,今天要說的是:Datepicker(日期選擇器)。
1.跟dialog元件相同,我們首先要先在html中使一個元素能夠定義元件的內容,我們這邊就使用
input元素來代表選擇完的日期會輸入到這邊去。舉例來說:
https://ithelp.ithome.com.tw/upload/images/20221017/201519709nqa6jXhkB.png

2.再來就沒有像dialog需要.on方法去呼叫了,我們只需要透過JQueryUI內建的.datepicker()方法去呼叫
就好了。舉例來說:
https://ithelp.ithome.com.tw/upload/images/20221017/20151970RsuYI7QOf7.png
這樣我們就可以做出一個能夠顯示出日期選擇器並代入選擇的日期的元件了!
當然datepicker元件也有很多能夠再進行更細的設定的屬性值,我簡單介紹幾個常用的屬性!更詳細且更多的屬性
能在官網教學上找到喔!

dateFormat: 可以設定日期的格式,預設的樣式是month/day/year,透過這個屬性也能改寫year/month/day。
changeMonth/changeYear: 布林值,能將月份或是日期改成下拉式清單來選擇,預設為false,代表不顯示下拉式清單,true代表顯示。
showButtonPanel: 布林值,能在日期選擇器底部顯示名稱為today和done的按鈕,today會選擇到當天的日期,done會關閉選擇器,預設為false,代表不顯示按鈕,true代表顯示。

今天的課程就到這邊~~


上一篇
DAY26 JQuery UI 元件:Dialog!!
下一篇
DAY28 JQuery UI 元件:Selectmenu!!
系列文
30天淺嘗主流前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言