【JavaScript】smalot-bootstrap-datetimepicker

説明

這是一套基於BS的函式庫，可以快速製作時間選擇器的小元件。

【必裝的函式庫】

屬性介紹

format【字串形式】

值 意義
p am / pm
P AM / PM
s 秒（沒有0開頭）
ss 秒（有0開頭）
i 分（沒有0開頭）
ii 分（有0開頭）
h 時（沒有0開頭，24小時制）
hh 時（有0開頭，24小時制）
H 時（沒有0開頭，12小時制）
HH 時（沒有0開頭，12小時制）
d 日期（沒有0開頭）
dd 日期（有0開頭）
m 數字月份（沒有0開頭）
mm 數字月份（有0開頭）
M 英文月份簡寫
MM 英文月份全名
yy 西元年（末二位數）
yyyy 西元年（四位數）

StartView / MinView 【數字形式】

在「只選擇月份」或是「只選擇日期」的情況下，預設的介面卻可以指定到某天的分鐘，會不太適合。
可以透過調整這2個參數達成更精準的控制

  • StartView：一開始選擇時間的介面〔預設：2〕
  • MinView：最後選擇時間的介面〔預設：0〕
值 意義
0 【選分鐘】hour view
1 【選小時】day view
2 【選日期】month view
3 【選月份】year view
4 【選年份】10-year view

範例：選擇日期

.input-append.date.form_datetime(data-view='hour')
 input(size='16', type='text', value='', readonly='', placeholder='2017-11-15 16:35')
 span.add-on
 i.fa.fa-calendar
$(".form_datetime[data-view='hour']").datetimepicker({
 format: "yyyy-mm-dd", //這邊可以自訂時間表示的格式
 autoclose: true,
 minView: 3
 });

範例：選擇時與分

.input-append.date.form_datetime(data-view='hour')
 input(size='16', type='text', value='', readonly='', placeholder='2017-11-15 16:35')
 span.add-on
 i.fa.fa-calendar
$(".form_datetime[data-view='hour']").datetimepicker({
 format: "yyyy-mm-dd hh:ii",
 autoclose: true
 });

範例：選擇月份

.input-append.date.form_datetime(data-view='year')
 input(size='16', type='text', value='', readonly='', placeholder='2017-11')
 span.add-on
 i.fa.fa-calendar
$(".form_datetime[data-view='year']").datetimepicker({
 format: "yyyy-mm",
 autoclose: true,
 startView: 4,
 minView: 3
 });

Display

CODEPEN