本文不适合初学者,建议有一定jQuery ui基础的朋友继续阅读
首先在style中屏蔽日期选择面板
<style type="text/css">
.ui-datepicker-calendar {
display: none;// 不显示日期面板
}
</style>
然后在javascript中设定onClose事件
function showdatepicker() {
$("#dateText").datepicker({
monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], // 区域化月名为中文
prevText: '上月', // 前选按钮提示
nextText: '下月', // 后选按钮提示
changeYear: true, // 年下拉菜单
changeMonth: true, // 月下拉菜单
showButtonPanel: true, // 显示按钮面板
showMonthAfterYear: true, // 月份显示在年后面
currentText: "本月", // 当前日期按钮提示文字
closeText: "关闭", // 关闭按钮提示文字
dateFormat: "yy-mm", // 日期格式
onClose: function(dateText, inst) {// 关闭事件
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
}