1.引入Jquery和easyui,注低版本的Jquery和easy不能使用,這里使用的Jquery是1.8.2easyui是1.6.1.1.easyui下載地址:http://www.jeasyui.net/download/
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script> <link rel="stylesheet" type="text/css" href="../../easyui161/gray/easyui.css" /> <link rel="stylesheet" type="text/css" href="../../easyui161/icon.css" /> <script type="text/javascript" src="../../easyui161/jquery.easyui.min.js"></script> <script type ="text/javascript" src ="easyui161/easyui-lang-zh_CN.js"></script>
2.日期控件
<input id="attYearMonth" editable="false" name="attYearMonth" class="easyui-datebox" style="width: 172px" />
3.easyui自帶的是沒有月份選擇的panel的,所以我們需要修改一下源代碼:
<script type="text/javascript"> $(function () { $('#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 arr = s.split('-'); return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1); }, //配置formatter,只返回年月 之前是這樣的d.getFullYear() + '-' +(d.getMonth()); formatter: function (d) { var currentMonth = (d.getMonth() + 1); var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + ''); return d.getFullYear() + '-' + currentMonthStr; } }); //日期選擇對象 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 m = date.getMonth() + 1; return y + '-' + m; } </script>
4.運行效果
轉自https://blog.csdn.net/ytangdigl/article/details/73381958
相關網頁https://blog.csdn.net/kry1201/article/details/50996172