Ligerui Date 扩展

最新推荐文章于 2020-12-30 14:26:11 发布

weixin_33721427

最新推荐文章于 2020-12-30 14:26:11 发布

阅读量158

点赞数

文章标签： python

原文链接：https://my.oschina.net/guzhixiong/blog/906729

版权

2019独角兽企业重金招聘Python工程师标准>>>

我们知道，在使用ligerui的时候，碰到有些功能ligerui 没有，但好在ligerui 提供了扩展功能

在date 的使用中，发现ligerui 没有设置最大值最小值的功能，这样在设置开始时间结束时间的时候，无法直接在date 选择的时候，直接控制，难道我们就只能用选择过后提示的方式么，那样感觉也太不友好了，今天我们就对date 的功能扩展一下，扩展的代码如下：

1 当前是这个样子的

主要扩展两个方法 setMax,setMin 同时重写bulidContent 方法

$.extend($.ligerui.controls.DateEditor.prototype,{
    setMax:function(value){
        var g = this;
        if (!value) g.inputText.val('');
        if (typeof value == "string")
        {
            if(g.isDateTime(value)|| g.isLongDateTime(value)){
                g.maxValue = g._bulidDate(value);
            }
        }
        if (typeof value == "object")
        {
            if (value instanceof Date)
            {
                g.maxValue = value;
            }
        }
        g.bulidContent();
    },
    setMin:function(value){
        var g = this;
        if (!value) g.inputText.val('');
        if (typeof value == "string")
        {
            if(g.isDateTime(value)|| g.isLongDateTime(value)){
                g.minValue = g._bulidDate(value);
            }
        }
        if (typeof value == "object")
        {
            if (value instanceof Date)
            {
                g.minValue = value;
            }
        }
        g.bulidContent();
    },
    bulidContent: function ()
    {
        var g = this, p = this.options;

        //当前月第一天星期
        var thismonthFirstDay = new Date(g.currentDate.year, g.currentDate.month - 1, 1).getDay();
        //当前月天数
        var nextMonth = g.currentDate.month;
        var nextYear = g.currentDate.year;
        if (++nextMonth == 13)
        {
            nextMonth = 1;
            nextYear++;
        }
        var monthDayNum = new Date(nextYear, nextMonth - 1, 0).getDate();
        //当前上个月天数
        var prevMonthDayNum = new Date(g.currentDate.year, g.currentDate.month - 1, 0).getDate();

        g.buttons.btnMonth.html(p.monthMessage[g.currentDate.month - 1]);
        g.buttons.btnYear.html(g.currentDate.year);
        g.toolbar.time.hour.html(g.currentDate.hour);
        g.toolbar.time.minute.html(g.currentDate.minute);
        if (g.toolbar.time.hour.html().length == 1)
            g.toolbar.time.hour.html("0" + g.toolbar.time.hour.html());
        if (g.toolbar.time.minute.html().length == 1)
            g.toolbar.time.minute.html("0" + g.toolbar.time.minute.html());
        $("td", this.body.tbody).each(function () { this.className = "" });
        $("tr", this.body.tbody).each(function (i, tr)
        {
            $("td", tr).each(function (j, td)
            {
                var id = i * 7 + (j - thismonthFirstDay);
                var showDay = id + 1;
                if (g.selectedDate && g.currentDate.year == g.selectedDate.year &&
                    g.currentDate.month == g.selectedDate.month &&
                    id + 1 == g.selectedDate.date)
                {
                    if (j == 0 || j == 6)
                    {
                        $(td).addClass("l-box-dateeditor-holiday")
                    }
                    $(td).addClass("l-box-dateeditor-selected");
                    $(td).siblings().removeClass("l-box-dateeditor-selected");
                }
                else if (g.currentDate.year == g.now.year &&
                    g.currentDate.month == g.now.month &&
                    id + 1 == g.now.date)
                {
                    if (j == 0 || j == 6)
                    {
                        $(td).addClass("l-box-dateeditor-holiday")
                    }
                    $(td).addClass("l-box-dateeditor-today");
                }
                else if (id < 0)
                {
                    showDay = prevMonthDayNum + showDay;
                    $(td).addClass("l-box-dateeditor-out")
                        .removeClass("l-box-dateeditor-selected");
                }
                else if (id > monthDayNum - 1)
                {
                    showDay = showDay - monthDayNum;
                    $(td).addClass("l-box-dateeditor-out")
                        .removeClass("l-box-dateeditor-selected");
                }
                else if (j == 0 || j == 6)
                {
                    $(td).addClass("l-box-dateeditor-holiday")
                        .removeClass("l-box-dateeditor-selected");
                }
                else
                {
                    td.className = "";
                }
                if(g.maxValue){
                    var time ;
                    if(id<0){
                        time = new Date(g.currentDate.year,g.currentDate.month-2,showDay);
                    }else if(id>=0&&id<(monthDayNum)){
                        time = new Date(g.currentDate.year,g.currentDate.month-1,showDay);
                    }else if(id > monthDayNum-1){
                        time = new Date(g.currentDate.year,g.currentDate.month,showDay);
                    }
                    if(time){
                        if(time> g.maxValue){
                            $(td).addClass("l-box-dateeditor-disable").removeClass("l-box-dateeditor-selected");
                        }
                    }
                }
                if(g.minValue){
                    var time ;
                    if(id<0){
                        time = new Date(g.currentDate.year,g.currentDate.month-2,showDay);
                    }else if(id>=0&&id<(monthDayNum)){
                        time = new Date(g.currentDate.year,g.currentDate.month-1,showDay);
                    }else if(id > monthDayNum-1){
                        time = new Date(g.currentDate.year,g.currentDate.month,showDay);
                    }
                    if(time){
                        if(time< g.minValue){
                            $(td).addClass("l-box-dateeditor-disable").removeClass("l-box-dateeditor-selected");
                        }
                    }
                }
                $(td).html(showDay);
            });
        });
    }
});

主要的原理就是每次在bulidContent 的时候，将每一格时间与设置的max 和 value 进行比较，然后添加一个 l-box-dateeditor-disable 的class

在 ligerui-form.css 中美化一下css

.l-box-dateeditor-body tbody td.l-box-dateeditor-out {
    color: #0099CC;
}
.l-box-dateeditor-body tbody td.l-box-dateeditor-disable {
    color: #aaa;
}

页面使用

var date = $("#startdate").ligerDateEditor({showTime: true,width:200})
date.setMax(new Date());

美化后，是这个样子，今天以后的全部隐藏

当然了，这个时候样子有了，但是但是，我们还是可以点击的。怎么办，因为ligerui 对于date 的事件，都是直接写在_render 内部方法中的，天哪，怎么办，只能修改源码了

日期点击事件

//日期 点击
$("td", g.body.tbody).hover(function ()
{
    if ($(this).hasClass("l-box-dateeditor-today")||$(this).hasClass("l-box-dateeditor-disable")) return;
    $(this).addClass("l-box-dateeditor-over");
}, function ()
{
    $(this).removeClass("l-box-dateeditor-over");
}).click(function ()
{
    if($(this).hasClass("l-box-dateeditor-disable")){
        return;
    }
    $(".l-box-dateeditor-selected", g.body.tbody).removeClass("l-box-dateeditor-selected");
    if (!$(this).hasClass("l-box-dateeditor-today"))
        $(this).addClass("l-box-dateeditor-selected");
    g.currentDate.date = parseInt($(this).html());
    g.currentDate.day = new Date(g.currentDate.year, g.currentDate.month - 1, 1).getDay();
    if ($(this).hasClass("l-box-dateeditor-out"))
    {
        if ($("tr", g.body.tbody).index($(this).parent()) == 0)
        {
            if (--g.currentDate.month == 0)
            {
                g.currentDate.month = 12;
                g.currentDate.year--;
            }
        } else
        {
            if (++g.currentDate.month == 13)
            {
                g.currentDate.month = 1;
                g.currentDate.year++;
            }
        }
    }

时间点击事件(时)

g.toolbar.time.hour.click(function ()
{
    if(g.maxValue){
        var time = new Date(g.currentDate.year,g.currentDate.month-1, g.currentDate.date);
        if(time>g.maxValue){
            return;
        }
    }
    if(g.minValue){
        var time = new Date(g.currentDate.year,g.currentDate.month-1, g.currentDate.date);
        if(time<g.minValue){
            return;
        }
    }
    $("li", g.body.hourselector).each(function (i, item)
    {
        //add selected style
        if (g.currentDate.hour == i)
            $(this).addClass("l-selected");
        else
            $(this).removeClass("l-selected");
    });
    g.body.hourselector.slideToggle();
});

分钟点击事件

g.toolbar.time.minute.click(function ()
{
    if(g.maxValue){
        var time = new Date(g.currentDate.year,g.currentDate.month-1, g.currentDate.date);
        if(time>g.maxValue){
            return;
        }
    }
    if(g.minValue){
        var time = new Date(g.currentDate.year,g.currentDate.month-1, g.currentDate.date);
        if(time<g.minValue){
            return;
        }
    }
    $("li", g.body.minuteselector).each(function (i, item)
    {
        //add selected style
        if (g.currentDate.minute == i)
            $(this).addClass("l-selected");
        else
            $(this).removeClass("l-selected");
    });
    g.body.minuteselector.slideToggle("fast", function ()
    {
        var index = $("li", this).index($('li.l-selected', this));
        if (index > 29)
        {
            var offSet = ($('li.l-selected', this).offset().top - $(this).offset().top);
            $(this).animate({ scrollTop: offSet });
        }
    });
});

转载于:https://my.oschina.net/guzhixiong/blog/906729