Change color for date field

[newinshappi3]

I have added a follow up field which is a datetime field. How can i make the color to red if the follow up date is past and green if the follow up date is future. I am using Espo CRM version 4.1.6.
Please any suggestions ?

[egi.zaberl]

Go to the file client/src/views/fields/date.js and look for function called afterRender: function ()

It should look like this bellow. Add green parts of the code and change fieldName to match your field name.

afterRender: function () {
    if (this.mode == 'edit' || this.mode == 'search') {
        this.$element = this.$el.find('[name="' + this.name + '"]');

        var wait = false;
        this.$element.on('change', function () {
            if (!wait) {
                this.trigger('change');
                wait = true;
                setTimeout(function () {
                    wait = false
                }, 100);
            }
        }.bind(this));

        var options = {
            format: this.getDateTime().dateFormat.toLowerCase(),
            weekStart: this.getDateTime().weekStart,
            autoclose: true,
            todayHighlight: true,
        };

        var language = this.getConfig().get('language');

        if (!(language in $.fn.datepicker.dates)) {
            $.fn.datepicker.dates[language] = {
                days: this.translate('dayNames', 'lists'),
                daysShort: this.translate('dayNamesShort', 'lists'),
                daysMin: this.translate('dayNamesMin', 'lists'),
                months: this.translate('monthNames', 'lists'),
                monthsShort: this.translate('monthNamesShort', 'lists'),
                today: this.translate('Today'),
                clear: this.translate('Clear'),
            };
        }

        options.language = language;

        var $datePicker = this.$element.datepicker(options).on('show', function (e) {
            $('body > .datepicker.datepicker-dropdown').css('z-index', 1200);
        }.bind(this));

        if (this.mode == 'search') {
            var $elAdd = this.$el.find('input[name="' + this.name + '-additional"]');
            $elAdd.datepicker(options).on('show', function (e) {
                $('body > .datepicker.datepicker-dropdown').css('z-index', 1200);
            }.bind(this));
            $elAdd.parent().find('button.date-picker-btn').on('click', function (e) {
                $elAdd.datepicker('show');
            });
        }

        this.$element.parent().find('button.date-picker-btn').on('click', function (e) {
            this.$element.datepicker('show');
        }.bind(this));


        if (this.mode == 'search') {
            var $searchType = this.$el.find('select.search-type');
            this.handleSearchType($searchType.val());
        }

[COLOR=#008000][B]    // style field based on it's name and date
        if (this.name == 'fieldName') {
            this.$element.on('change', function () {
                if (new Date($(this).data('datepicker').getFormattedDate('yyyy-mm-dd')).getTime() > new Date().getTime()) {
                    $(this).css('background-color', 'green').css('color', 'white');
                } else {
                    $(this).css('background-color', '#990000').css('color', 'white');
                }
            })
        }[/B][/COLOR]

    } else {

[COLOR=#008000][B]// style field based on it's name and date
        if (this.name == 'fieldName') {
            var value = this.model.get(this.name);
            var field = $('div.field[data-name="' + this.name + '"]');
            if (new Date(value).getTime() > new Date().getTime()) {
                field.addClass('text-success');
            } else {
                field.addClass('text-danger');
            }
        }[/B][/COLOR]

    }
},

[newinshappi3]

It worked in the detailed view. can it be applied in the list view also ?

[egi.zaberl]

Replace code in else statement with this one:

if (this.name == 'fielName') {
    var value = this.model.get(this.name), field;
    if (this.mode == 'list') {
        field = $('td.cell[data-name="' + this.name + '"] span');
    } else {
        field = $('div.field[data-name="' + this.name + '"]');
    }
    if (new Date(value).getTime() < new Date().getTime()) {
        field.addClass('text-success');
    } else {
        field.addClass('text-danger');
    }
}

[newinshappi3]

this code is changing colour of all the fields in the column to red

[newinshappi3]

I have modified the field id to each row id

// style field based on it's name and date
if (this.name == 'followUp') {
    var value = this.model.get(this.name), field;
    if (this.mode == 'list') {
        field = $('tr.list-row[data-id="' +this.model.id+ '"]>td.cell[data-name="' + this.name + '"]');
    } else {
        field = $('div.field[data-name="' + this.name + '"]');
    }
    if (new Date(value).getTime() < new Date().getTime()) {
        field.addClass('text-danger');
    } else {
        field.addClass('text-success');
    }
        }
//end

The result is



Thank you very much egi.zaberl

[egi.zaberl]

Glad to help

[Pablo]

Hi egi.zaberl,

We need exactly what newinshappi3 needed but for a date-time field. We found the file client/src/views/fields/datetime.js but haven't been able to set to red the past dates of our field called "seguimientoLead".

We have added the following green code inside datetime.js but haven't been able to make it work:

 afterRender: function () {
Dep.prototype.afterRender.call(this);

if (this.mode == 'edit') {
var $date = this.$date = this.$element;
var $time = this.$time = this.$el.find('input.time-part');
this.initTimepicker();

this.$element.on('change.datetime', function (e) {
if (this.$element.val() && !$time.val()) {
this.setDefaultTime();
this.trigger('change');
}
}.bind(this));

var timeout = false;
var changeCallback = function () {
if (!timeout) {
this.trigger('change');
}
timeout = true;
setTimeout(function () {
timeout = false;
}, 100)
}.bind(this);
$time.on('change', changeCallback);
}


[B][COLOR=#27ae60]// style field based on it's name and date
if (this.name == 'seguimientoLead') {
this.$element.on('change', function () {
if (new Date($(this).data('datepicker').getFormattedDate(' yyyy-mm-dd')).getTime() > new Date().getTime()) {
$(this).css('background-color', 'green').css('color', 'white');
} else {
$(this).css('background-color', '#990000').css('color', 'white');
}
})
}

} else {

// style field based on it's name and date
if (this.name == 'seguimientoLead') {
var value = this.model.get(this.name);
var field = $('div.field[data-name="' + this.name + '"]');
if (new Date(value).getTime() > new Date().getTime()) {
field.addClass('text-success');
} else {
field.addClass('text-danger');
}
}[/COLOR][/B]

},

Can you PLEASE check?

Thanks a lot.