【只能选择年和月且下拉框只显示月份】
<input id="attYearMonth" class="easyui-datebox" data-options="editable:false">
//初始化时间下拉框 function getTimePicker() { $('#attYearMonth').datebox({ //显示日趋选择对象后再触发弹出月份层的事件,初始化时没有生成月份层 onShowPanel: function () { //触发click事件弹出月份层 span.trigger('click'); if (!tds) //延时触发获取月份对象,因为上面的事件触发和对象生成有时间间隔 setTimeout(function () { tds = p.find('div.calendar-menu-month-inner td'); tds.click(function (e) { //禁止冒泡执行easyui给月份绑定的事件 e.stopPropagation(); //得到年份 var year = /d{4}/.exec(span.html())[0], //月份 //之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1; month = parseInt($(this).attr('abbr'), 10); //隐藏日期对象 $('#attYearMonth').datebox('hidePanel') //设置日期的值 .datebox('setValue', year + '-' + month); }); }, 0); }, //配置parser,返回选择的日期 parser: function (s) { if (!s) return new Date(); var period = $("#TimeID").combobox("getValue").toString(); if (period != "Year") { var arr = s.split('-'); return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1); } else { return new Date(parseInt(s, 10), 1, 1); } }, //配置formatter,只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth()); formatter: function (d) { var period = $("#TimeID").combobox("getValue").toString(); if (period != "Year") { var currentMonth = (d.getMonth() + 1); var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + ''); return d.getFullYear() + '-' + currentMonthStr; } else { return d.getFullYear(); } } }); //日期选择对象 var p = $('#attYearMonth').datebox('panel'), //日期选择对象中月份 tds = false, //显示月份层的触发控件 span = p.find('span.calendar-text'); var curr_time = new Date(); //设置前当月 $("#attYearMonth").datebox("setValue", myformatter(curr_time)); } //更改时间格式 function myformatter(date) { //获取年份 var y = date.getFullYear(); var period = $("#TimeID").combobox("getValue").toString(); if (period != "Year") { //获取月份 var m = date.getMonth(); if (m == 1) { return y + '-' + (m + 1); } return y + '-' + m; } else { return y; } }
【用周期下拉框来控制时间选择框的显示值】
function changeDate() { var period = $("#TimeID").combobox("getValue").toString(); var time = $("#attYearMonth").datebox('getValue'); var date = new Date(); var y = date.getFullYear(); var m = date.getMonth(); var curr = ""; if (m == 0) { y = date.getFullYear() - 1; curr = y + "-12"; } else { curr = y + '-' + (m < 10 ? ('0' + m) : m); } if (time.indexOf('-') > 0 && period == "Year") { $("#attYearMonth").datebox('setValue', y); } if (time.indexOf('-') < 0 && period != "Year") { $("#attYearMonth").datebox('setValue', curr); } }
【自定义年选择控件(只能选择年)】
function initTimeOptions() { var temp = [{ TimeName: '2014', TimeCode: '2014' }, { TimeName: '2015', TimeCode: '2015' }, { TimeName: '2016', TimeCode: '2016' }, { TimeName: '2017', TimeCode: '2017' }, { TimeName: '2018', TimeCode: '2018' }, { TimeName: '2019', TimeCode: '2019' }, { TimeName: '2020', TimeCode: '2020' }, { TimeName: '2021', TimeCode: '2021' }, { TimeName: '2022', TimeCode: '2022' }, { TimeName: '2023', TimeCode: '2023' }, { TimeName: '2024', TimeCode: '2024' }, { TimeName: '2025', TimeCode: '2025' }]; //var list = JSON.stringify(data); $("#attYearMonth").combobox({ data: temp, editable: false, valueField: 'TimeCode', textField: 'TimeName', onSelect: function (data) { TimeCode = data.TimeCode; TimeName = data.TimeName; } }); var date = new Date(); var year;
//一月默认选择上一年 if (date.getMonth() + 1 == 1) { year = date.getFullYear() - 1; } else { year = date.getFullYear(); } $("#attYearMonth").combobox("setValue", year); }