1. 程式人生 > >easyui datebox時間控制元件如何只顯示年月

easyui datebox時間控制元件如何只顯示年月

easyui datebox控制元件,只顯示年月,不顯示年月日

需要的效果圖如下:

具體的js程式碼:

<script>
    $(function(){
        intiMonthBox('costTime');                
});

    var intiMonthBox = function(id){
        var db = $('#'+id);
        db.datebox({
               onShowPanel: function () {//顯示日趨選擇物件後再觸發彈出月份層的事件,初始化時沒有生成月份層
span.trigger('click'); //觸發click事件彈出月份層 if (!tds) setTimeout(function () {//延時觸發獲取月份物件,因為上面的事件觸發和物件生成有時間間隔 tds = p.find('div.calendar-menu-month-inner td'); tds.click(function (e) { e.stopPropagation();
//禁止冒泡執行easyui給月份繫結的事件 var year = /\d{4}/.exec(span.html())[0]//得到年份 , month = parseInt($(this).attr('abbr'), 10); //月份,這裡不需要+1 db.datebox('hidePanel')//隱藏日期物件 .datebox('setValue', year + '-' + month); //設定日期的值
}); }, 0); yearIpt.unbind();//解綁年份輸入框中任何事件 }, 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: function (d) { return d.getFullYear() + '-' + (d.getMonth() + 1); } }); var p = db.datebox('panel'), //日期選擇物件 tds = false, //日期選擇物件中月份 yearIpt = p.find('input.calendar-menu-year'),//年份輸入框 span = p.find('span.calendar-text'); //顯示月份層的觸發控制元件 } </script>

html頁面

<div>
    <label>顯示年月:</label>
    <input id="costTime" type="text" class="easyui-datebox"/>
</div>

需引入檔案:

<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4.3/themes/metro/easyui.css">
<script type="text/javascript" src="../js/jquery-easyui-1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

其中遇到問題:

1)漢化和格式

需引入檔案,easyui-lang-zh_CN.js,放在easyui.min.js後面

<script type="text/javascript" src="../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

2)顯示亂碼問題

這是編碼問題導致的,將原先的gb2312編碼改成utf-8

最終的顯示結果

參考網址:

http://www.cnblogs.com/hmYao/p/5779463.html