提姆寫程式

0%

jQuery 筆記 - datepicker 與 timepicker 套件練習

發表於 更新於 分類於 Disqus：
月曆跟時間不需要自己寫啦!

calender

還記得之前挑戰旅館訂房網站頁面，手刻月曆真是花了很長的時間，不過也首次見識到 flex 排版的威力。

後來才知道有月曆跟時間的套件…就來記錄一下使用的方式。

匯入套件

如果想要修改月曆配色，可以使用 cdn 或官網下載套件或是 jQuery UI CSS cdn

1
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui.css">

我是下載整包檔案

datepicker

datepicker cdnjs https://cdnjs.com/libraries/datepicker

我這次是選擇用 jQuery UI 的 datepicker 套件，進入頁面後可以在右側欄選擇喜歡的月曆的出現形式，使用的前提是要搭配 input，type="text"，雖然原本 input 就有預設 date 類型，但樣式太醜，所以才用此套件。

官網範例程式碼

HTML

1
<p>Date: <input type="text" id="datepicker"></p>

javascript

1
2
3
4
5
<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  });
</script>

預設顯示為 日/月/年，但我比較喜歡年/月/日，官網也提供修改的方式：

1
2
3
4
5
$(function () {
  $("#datepicker").datepicker({
    dateFormat: "yy-mm-dd", //修改顯示順序
  });
});

timepicker

我是找這個套件，

timepicker cdnjs https://cdnjs.com/libraries/timepicker

跟 datepicker 很類似，一樣先參考官網程式碼，再修正成喜歡的樣式跟內容：

1
2
3
4
5
6
7
8
9
10
11
$(".timepicker").timepicker({
  timeFormat: "h:mm p", // 時間隔式
  interval: 60, //時間間隔
  minTime: "10", //最小時間
  maxTime: "6:00pm", //最大時間
  defaultTime: "11", //預設起始時間
  startTime: "10:00", // 開始時間
  dynamic: true, //是否顯示項目，使第一個項目按時間順序緊接在所選時間之後
  dropdown: true, //是否顯示時間條目的下拉列表
  scrollbar: true, //是否顯示捲軸
});

一樣要同步寫入 CSS，才會在點擊 input 後出現在下方。

datepicker 跟 timepicker 的樣式都是直接從預設樣式修改成要的，不是自己另外寫。

Codepen https://codepen.io/hnzxewqw/pen/LYppObK