JQuery-UI日曆設置

首先到Jquery-ui 下載

接下來匯入 CSS 以及 JQuery-ui
(#再匯入前記得先匯入JQuery 不然會無法支援)


設定方面

我會先使用變數把要改的東西先存進去
<script>
var date = {
   dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
   dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
   monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
   monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
   prevText: "上月",
   nextText: "次月",
   weekHeader: "週",
   showMonthAfterYear: true,
   dateFormat: "mm/dd",
   minDate: 0
};

$("#datecon").datepicker(date)

</script>
如果不使用變數的話你可以這樣用
$("#datecon").datepicker( {
    dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
    dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    prevText: "上月",
    nextText: "次月",
    weekHeader: "週",
    showMonthAfterYear: true,
    dateFormat: "mm/dd",
    minDate: 0
})
//minDate :禁止選取已過日期
//dateFormat: 顯示格式 你可以yy/mm/dd 也可以 mm-dd

</script>

HTML部分

<input type="text" id="datecon" >

我需使用上button來觸發事件

<button class=" button"></button>

<script>

$('button').on('click', function() {

   $("#datecon").datepicker('show');

});

</script>

附上

See the Pen JQuery-UI for cnt user by steven (@steven0514) on CodePen.