---
# System prepended metadata

title: 2021年 日期選擇器datepicker 比較
tags: [前端]

---

# 2021年 日期選擇器datepicker 比較

## 必備項目
* 支援多國語系

## 加分項目
* 民國年範例
* 鍵盤事件

## jqueryui datepicker
最老牌的也是最萬用的，範例最多
https://jqueryui.com/datepicker/

有使用民國年的範例
https://codepen.io/not0000/pen/KvvGjr?editors=0010
![](https://i.imgur.com/6duvNc7.png)

## React Datepicker
https://reactdatepicker.com/
特色：支援鍵盤操作
![](https://i.imgur.com/As66tLq.png)


## bootstrap-datepicker
https://github.com/uxsolutions/bootstrap-datepicker
### 特色
* 支援鍵盤操作
* demo範例很多
https://uxsolutions.github.io/bootstrap-datepicker/

### 相依套件
Bootstrap 2.0.4+
jQuery 1.7.1+
![](https://i.imgur.com/GqDMfRj.png)

## bootstrap-material-datetimepicker/
http://t00rk.github.io/bootstrap-material-datetimepicker/
特色：對手機介面友善
缺點：無法用鍵盤操作

中文教學
https://dotblogs.com.tw/shadow/2017/11/28/001719

### 解衝突
因為呼叫的function都是datepicker()，如果要和jquery ui或是其他套並用的時候可以參考這篇解衝突
noConflict();
https://stackoverflow.com/a/34681761/4893973

sample code
https://stackoverflow.com/questions/22277563/jquery-ui-datepicker-conflict-with-bootstrap-datepicker
![](https://i.imgur.com/UoyBjCj.png)

###### tags: `前端`