@syncfusion/ej2-grids/src/grid/renderer/date-filter-ui.js

Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.

import { DatePicker, DateTimePicker } from '@syncfusion/ej2-calendars';
import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
import { getCustomDateFormat } from '../base/util';
import * as events from '../base/constant';
import * as literals from '../base/string-literals';
/**
 * `datefilterui` render date column.
 *
 * @hidden
 */
var DateFilterUI = /** @class */ (function () {
    function DateFilterUI(parent, serviceLocator, filterSettings) {
        this.dpOpen = this.openPopup.bind(this);
        this.parent = parent;
        this.locator = serviceLocator;
        this.fltrSettings = filterSettings;
        if (this.parent) {
            this.parent.on(events.filterMenuClose, this.destroy, this);
            this.parent.on(events.destroy, this.destroy, this);
        }
    }
    DateFilterUI.prototype.create = function (args) {
        var format = getCustomDateFormat(args.column.format, args.column.type);
        this.dialogObj = args.dialogObj;
        this.inputElem = this.parent.createElement('input', { className: 'e-flmenu-input', id: 'dateui-' + args.column.uid });
        args.target.appendChild(this.inputElem);
        if (args.column.type === 'date' || args.column.type === 'dateonly') {
            this.datePickerObj = new DatePicker(extend({
                format: format,
                cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',
                placeholder: args.localizeText.getConstant('ChooseDate'),
                width: '100%',
                locale: this.parent.locale,
                enableRtl: this.parent.enableRtl
            }, args.column.filter.params));
        }
        else if (args.column.type === 'datetime') {
            this.datePickerObj = new DateTimePicker(extend({
                format: format,
                cssClass: this.parent.cssClass ? 'e-popup-flmenu' + ' ' + this.parent.cssClass : 'e-popup-flmenu',
                placeholder: args.localizeText.getConstant('ChooseDate'),
                width: '100%',
                locale: this.parent.locale,
                enableRtl: this.parent.enableRtl
            }, args.column.filter.params));
        }
        this.datePickerObj.addEventListener(literals['open'], this.dpOpen);
        this.datePickerObj.appendTo(this.inputElem);
    };
    DateFilterUI.prototype.write = function (args) {
        var dateuiObj = document.querySelector('#dateui-' + args.column.uid).ej2_instances[0];
        dateuiObj.value = !isNullOrUndefined(args.filteredValue) ? new Date(args.filteredValue) : null;
    };
    DateFilterUI.prototype.read = function (element, column, filterOptr, filterObj) {
        var dateuiObj = document.querySelector('#dateui-' + column.uid).ej2_instances[0];
        var filterValue = dateuiObj.value;
        filterValue = isNullOrUndefined(filterValue) ? null : filterValue;
        filterObj.filterByColumn(column.field, filterOptr, filterValue, 'and', true);
    };
    DateFilterUI.prototype.openPopup = function (args) {
        args.popup.element.style.zIndex = (this.dialogObj.zIndex + 1).toString();
    };
    DateFilterUI.prototype.destroy = function () {
        this.parent.off(events.filterMenuClose, this.destroy);
        this.parent.off(events.destroy, this.destroy);
        if (isNullOrUndefined(this.datePickerObj) || this.datePickerObj.isDestroyed) {
            return;
        }
        this.datePickerObj.removeEventListener(literals['open'], this.dpOpen);
        this.datePickerObj.destroy();
    };
    return DateFilterUI;
}());
export { DateFilterUI };