###### tags: `jQuery`
# jQuery UI 實例– 日期選擇器（Datepicker）
## 製作日期選擇器（Datepicker）
暫記
http://www.w3big.com/zh-TW/jqueryui/example-datepicker.html

## 修改 Datepicker 的css
請在`.ui-datepicker `裡做修改調整 Datepicker。

.ui-datepicker { 
  margin-left: 100px;
  z-index: 1000;
}

參考：
[How to change the pop-up position of the jQuery DatePicker control](https://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control)

## 日期選擇器（Datepicker）加入 FontAwesome icon 圖示按鈕

       $("#datepicker").datepicker({
            showOn: "both",
            buttonText: "<i class='far fa-calendar-alt'></i>" 
            //加入 FontAwesome icon
        });

並在css裡把`<button></button>`預設的樣式清除：

.ui-datepicker-trigger{
    border:none;
    background:none;
 }

參考：
* [jQuery Datepicker with FontAwesome Button?](https://stackoverflow.com/questions/24019359/jquery-datepicker-with-fontawesome-button)
* [example](http://jsfiddle.net/Fa8Xx/1894/)