CSS selector compare dates

CSS by default will not allow you to compare dates, and does not support operators like >,<,<=,>= .

To do date comparison, you will need to write your own function to process the selector, before deciding on what action to perform based on whether the date comparison is true or false . Actions can be such such as adding of class, appending new elements, removing classes and so on..

The code below was written for my own usage, so you’ll most likely need to adapt it to your own use case. The code below makes use of jQuery, as well as moment library to handle time comparisons.

        // We are basically going to customize the default CSS selector,
        // to support date comparison of YYYY-MM-DD format by using moment library
        // please follow the format [date:<attribute_name><operator><value>]
        var default_date_format = 'YYYY-MM-DD';
        // see the regex : https://regex101.com/r/8QljYM/1
        /*
            var resi = "[date:abc>2021-12-12][date:abc<2021-04-04]".matchAll(/\[date:([a-zA-Z0-9\-]+)([><=]|>=|<=)['"]?([a-zA-Z0-9\-]+)['"]?\]/g);
            var matches = [...resi];

            matches output :
                (2) [Array(4), Array(4)]
                0: (4) ["[date:abc>2021-12-12]", "abc", ">", "2021-12-12", index: 0, input: "[date:abc>2021-12-12][date:abc<2021-04-04]", groups: undefined]
                1: (4) ["[date:abc<2021-04-04]", "abc", "<", "2021-04-04", index: 21, input: "[date:abc>2021-12-12][date:abc<2021-04-04]", groups: undefined]
                length: 2
        */
        var r_date_matches          = c_identifier.matchAll(/\[date:([a-zA-Z0-9\-]+)([><=]|>=|<=)['"]?([a-zA-Z0-9\-]+)['"]?\]/g) // add global flag
        var date_matches            = [...r_date_matches];
        var c_modified_identifier   = c_identifier; 

        for(var i=0;i < date_matches.length; i++) {
            var date_match      = date_matches[i];
            if( date_match.length !== 4 ) {
                console.error("date_match.length != 4");
                continue;
            }
            var attribute_name  = date_match[1];
            var operator        = date_match[2];
            var compare_value   = date_match[3];
            var m_compare_value = moment(compare_value, default_date_format);

            var value = $(td).attr(attribute_name);
            if( !value ) {
                console.error("Failed to find attribute_name=" + attribute_name);
                continue;
            }
            var m_value = moment(value, default_date_format);

            if( operator === '=' ) {
                if( !m_value.isSame(m_compare_value) ) return false; // doesnt match
            } else if ( operator === '>' ) {
                if( !m_value.isAfter(m_compare_value) ) return false;
            } else if ( operator === '<' ) {
                if( !m_value.isBefore(m_compare_value) ) return false;
            } else if ( operator === '>=' ) {
                if( !m_value.isSameOrAfter(m_compare_value) ) return false;
            } else if ( operator === '<=' ) {
                if( !m_value.isSameOrBefore(m_compare_value) ) return false;
            } else {
                console.error("[CMCalendarInterface::should_display_component] Invalid operator=" + operator);
                continue;
            }

            //Remove out non-CSS selector, otherwise we will have bad syntax.
            c_modified_identifier = c_modified_identifier.replace(date_match[0], "");
        }

        // Normal CSS selector will go here.
        return td.matches(c_modified_identifier);