jquery.datepicker下拉月曆只顯示年-月的設定方法-教學撰寫:徐嘉裕Neil hsu

jquery.datepicke是個非常好用的日曆套件，基本樣式是顯示年月日，也能顯示年月日時分秒，修改一下還能只顯示年月，當成月曆來使用，設定方法如下：

先在樣板端引入以下的JS與CSS檔

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style type="text/css">
    .ui-datepicker-calendar {
        display: none;  //隱藏日期區塊
    }
</style>

然後貼上

<script>

$(function () {

$('#datepicker').datepicker({

changeYear: true, // 年下拉選單

changeMonth: true, // 月下拉選單

showButtonPanel: true, // 顯示介面

showMonthAfterYear: true, // 月份顯示在年後面

dateFormat: 'yy-mm-dd',

showButtonPanel: true,

monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], // 月名中文

prevText: '上月', // 上月按鈕

nextText: '下月', // 下月按鈕

currentText: "本月", // 本月按鈕

closeText: "送出", // 送初選項按鈕

onClose: function (dateText, inst) {

var month = $("#ui-datepicker-div .ui-datepicker-month option:selected").val(); //得到選則的月份值


//增加0判斷

var parseIntok=parseInt(month) + 1;

if(parseIntok < 10){

parseIn='0'+parseIntok;

}else{

parseIn=parseIntok;

}

var year = $("#ui-datepicker-div .ui-datepicker-year option:selected").val(); //得到選則的年份值

$('#datepicker').val(year + '-' + parseIn); //给input赋值，其中要對月值加1才是實際的月份

}

});

});


</script>

HTML結構

<div class="col-md-7"><input type='text' id='datepicker' class='datepicker form-control' name='setuptime' value='' placeholder='選擇訂單查詢時間'></div>

這樣就只會顯示年-月，可以當成月曆來使用讓USER以月分來查詢資料

參考資料來源：http://blog.csdn.net/deepwishly/article/details/5333861

教學撰寫：徐嘉裕 Neil hsu