datepicker只选择年月的设置技巧
2015-10-21 10:56
549 查看
本文不适合初学者,建议有一定jQuery ui基础的朋友继续阅读
首先在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));
}
});
}
首先在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));
}
});
}
相关文章推荐
- 基于Silverlight DataGrid中无代码设置开始与结束日期DatePicker的实现方法
- jQuery插件datepicker 日期连续选择
- jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
- Jquery日期选择datepicker插件用法实例分析
- datePicker――日期选择控件(with jquery)
- android中DatePicker和TimePicker的使用方法详解
- Juqery datepicker 只显示 年和月 不显示 日 和 只选择年份的下拉列表
- JQuery datepicker 用法
- 关于日历控件
- Object has no method 'datepicker'
- datepicker设置日期格式为yyyy年m月d日
- WEB开发必备的jQuery UI 库
- JS日期控件使用
- datepicker的应用以及日期格式的转换
- ExtJS设置Datepicker默认值
- Android 自定义DatePicker / DatePickerDialog
- Android学习笔记之——DatePicker&TimePicker
- UIDataPicker调研总结
- jquery datepicker 选择月份
- 日期控件My97 DatePicker 的使用