easyui 按年，按年月，按年月日显示提交后台

前端  /  管理员 发布于 6年前   664

话不多说直接上代码

前端代码：

日期：
    <div id="dates" style="display: inline-block;">
       <input type="text" name="starttime" class="easyui-datebox date" style="width:100px;">~
       <input type="text" name="endtime" class="easyui-datebox date" style="width:100px;">&nbsp;&nbsp;
    </div>
    <div id="years" style="display:none;">
    <input type="text" name="starttime2" class="easyui-combobox year" style="width:130px;" value=""
        data-options='panelHeight:"150",valueField:"id",textField:"name",data:<?php echo $year;?>,editable:false'>
    >至
    <input type="text" name="endtime2" class="easyui-combobox year" style="width:130px;" value=""
        data-options='panelHeight:"150",valueField:"id",textField:"name",data:<?php echo $year;?>,editable:false'>&nbsp;&nbsp;
    </div>

效果图：

1.年日月：直接用easyui-datebox组件；

2.年月；day,month,year对应三个类型点击触发

        if (v.value != 'day')
        {
            if (v.value == 'month') {
            // ------start 
             //日期按钮只显示年月份
            $('#<?php echo NS;?>searchform .date').datebox({
                onShowPanel: function () {
                    var self = this;
                    var panel = $(this).datebox('panel');
                    var span = $('.calendar-header>.calendar-title>span.calendar-text', panel);
                    span.trigger('click');
                    $('div.calendar-menu-month-inner td', panel)
                        .click(function (e) {
                            setTimeout(function () {
                                $('.calendar-day:not(.calendar-other-month):first', panel).click();
                            }, 0);
                        });
                },
                formatter: function (date) {
                    return date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).match(/\d{2}$/);
                },
                parser: function (str) {
                    if (!str) return new Date();
                    if (str.match(/^\d{4}\-\d{2}$/)) {
                        return new Date(parseInt(str.match(/^\d{4}/), 10), parseInt(str.match(/\d{2}$/), 10) - 1, 01);
                    } else {
                        return new Date();
                    }
                }
            });
            // ------end
            }else { 
                //显示年份下拉框
                $('#dates').hide();
                //$('.year').next(".combo").show();
                $('#years').css('display','inline-block').show();
            }
            //“月报表”或者“年报表”的时候，“时间”选择器清空/变灰
            //$('#<?php echo NS;?>searchform .date').datebox({disabled: true});
            //$('#<?php echo NS;?>searchform .date').datebox('setValue','');
        } else {
            //“日报表”的时候，“时间”选择器恢复
            $('#<?php echo NS;?>searchform .date').datebox({disabled: false});
        }

效果图：

3.年    取巧了 用隐藏显示实现了 方便 呵呵 后台传进来下拉框的年份

后台传前端：
        $year = array(array('id'=>'','name'=>'不限'));
        $today = date('Y');
        for ($i=2013;$i<=$today;$i++)
        {
            $year[]= array('id'=>$i,'name'=>$i);
        }

直接看效果图：