EasyUI中Datagrid行编辑时的时间控件限制

最新推荐文章于 2024-01-17 13:52:36 发布

风若寒89

最新推荐文章于 2024-01-17 13:52:36 发布

阅读量850

点赞数

文章标签： easyui 前端 javascript datagrid

本文链接：https://blog.csdn.net/zhao8912/article/details/131122205

版权

文章描述了如何使用EasyUI的datebox组件在datagrid中实现开始时间和结束时间的选择，确保结束时间在开始时间之后且不能跨年。通过onSelect事件和自定义的parser函数，以及对日期的格式化处理，实现了这一功能。

摘要由CSDN通过智能技术生成

需求：

（1）选择“开始时间”之后，“结束时间”只能选择“开始时间”之后的数据

（2）时间不能跨年

经过查看easyUI的官方文档发现：

（1）行编辑时候editor可以选择type类型是datebox，或者datetimeboxbox

（2）选中日期控件之后的方法onSelect

（3）选中之后对日期的格式化需要使用方法parser

（4）为了汉化需要引入easyui-lang-zh_CN.js

datagrid页面：

  <th data-options="field:'WorkStartDate',align:'center',styler:editDateStyle,formatter:formatterTime,editor:{type:'datebox',options:{required:true,editable:false,parser: dateparser, onSelect:onSelectStartDate}}" width="100">Work Start Date</th>
  <th data-options="field:'WorkEndDate',align:'center',styler:editDateStyle,formatter:formatterTime,editor:{type:'datebox',options:{required:true,editable:false,parser: dateparser,onSelect:onSelectEndDate}}" width="100">Work End Date</th>

代码：

 //开始时间选定的时候，设定结束时间的范围
    //格式转成一致
    //js  标准日期是 8:00 遵循东八区规则，需要转成 00:00  否则比较时间会出现问题
    function onSelectStartDate(startdate) {

        if (startdate != "") {
            var rowIndex = getRowIndexEngineer();//获取行号

           
            var edEndDate = $("#tabEngineer").datagrid('getEditor', { index: rowIndex, field: "WorkEndDate" });


            //选中开始时间之后,设定结束时间的范围

          
            var workEndDate = $(edEndDate.target).datebox("getValue");
            ;
            var workStartDate = formateTimeyyyyMMdd(startdate);
            workEndDate = formateTimeyyyyMMdd(workEndDate);

            if (workStartDate != "" && workEndDate != "" && (new Date(workStartDate) > new Date(workEndDate))) {

                $(edEndDate.target).datebox("setValue", "");
            }
          
            $(edEndDate.target).datebox("calendar").calendar( //选中开始时间之后，确定结束时间的范围,同时设定日期不能跨年
                {
                    validator: function (enddate) {
                        if (startdate != null && startdate != "") {
                            var kuanian = getKuanian(startdate, 2);
                            return startdate <= enddate && enddate < kuanian;
                        }
                        else
                            return true;
                    }
                });



        }
    }

 //结束日期选择之后执行
    function onSelectEndDate(enddate) {

        if (enddate != "") {
            var rowIndex = getRowIndexEngineer();//获取行号

           
            var edStartDate = $("#tabEngineer").datagrid('getEditor', { index: rowIndex, field: "WorkStartDate" });

            //选中结束时间之后

         
            var workStartDate = $(edStartDate.target).datebox("getValue");
            workStartDate = formateTimeyyyyMMdd(workStartDate);
            var workEndDate = formateTimeyyyyMMdd(enddate);

            if (workStartDate != "" && workEndDate != "" && (new Date(workEndDate) < new Date(workStartDate))) {

                $(edStartDate.target).datebox("setValue", "");
            }
            
            if (edStartDate != null && edStartDate.target != null) {
                //选中结束时间之后，确定开始时间的范围
               
                var c = $(edStartDate.target).datebox("calendar");
                if (c != null && c != "undefined") {
                    c.calendar(
                {
                    validator: function (startdate) {
                        if (startdate != null && startdate != "") {
                            var kuanian = getKuanian(enddate, 1);
                            return startdate <= enddate && startdate > kuanian;;
                        }
                        else
                            return true;
                    }
                });
                }

            }
        }
    }

function formatterTime(value, row, index) {

        if (value != "" && value != undefined) {
            var valueF = new Date(value);
            var year = valueF.getFullYear();
            var month = valueF.getMonth() + 1;
            var day = valueF.getDate();
            // var hour = date.getHours();
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;
            // hour = hour < 10 ? '0' + hour : hour;
            return year + "-" + month + "-" + day;
        }
        else {

            return "";
        }
    }

    function dateparser(value) {

        if (!value)
            return new Date();
        if (value.indexOf("Date") != -1) {
            var date = new Date();
            date.setTime(value.replace(/\/Date(−?\d+)(−?\d+ )\//, '$1'));
            return date;
        } else {

            var arr1 = value.split('-');
            var y = parseInt(arr1[0], 10);
            var M = parseInt(arr1[1], 10);
            var d = parseInt(arr1[2], 10);

            if (!isNaN(y) && !isNaN(M) && !isNaN(d)) {
                return new Date(y, M - 1, d);

            } else {
                return new Date();
            }
        }

    }

function getKuanian(date1, type) {
        var d = new Date(date1);
        var year = d.getFullYear();
        if (type == 1)
            return new Date((year - 1) + "-12" + "-31");
        else
            return new Date((year + 1) + "-01" + "-01");

    }
    function getRowIndexEngineer() {
        var row = $('#tabEngineer').datagrid('getSelected');
        var rowIndex = $('#tabEngineer').datagrid('getRowIndex', row);//获取行号
        return rowIndex;
    }

 function formateTimeyyyyMMdd(date) {
        var time = new Date(date);
        return time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();

    }