Native Date Renderer¶

const FieldRenderer = skuid.component.FieldRenderer,
    $ = skuid.$;

// To avoid intermingling styles with the logic code below,
// let's create a `styles` object that contains the necessary CSS.
// We can then apply that later on using $(element).css().

const styles = {
    default: {
        "border": "none",
        flex: "auto",
        "background-color": "#fff",
        color: "#4a4f5a",
        "font-family": "Roboto,Helvetica,sans-serif",
        "font-size": "13px",
        "font-weight": "400",
        padding: "8px",
        width: "100%",
        "min-width": "48px",
        position: "relative",
    },
    focused: {
        "border-color": "#005cb9",
    },
    edit: {
        border: "1px solid #d1d3d5",
        "border-radius": "3px",
        "box-shadow": "0 0 2px 0 rgba(139,143,149,.12) inset, 0 2px 2px 0 rgba(139,143,149,.24) inset"
    }
};

// Date input fields require values to be in YYYY-MM-DD format.
// Assuming we're working with ISO 8601 datetime fields,
// which look like YYYY-MM-DDThh:mm:ss.sss (or some variation),
// we can parse them in a _very_ basic manner. We'll use this logic
// in both the read and edit modes, so let's define it as a function here.
const parseDate = (value) => {
    if (value) {
        return value.split("T")[0];
    }
}

return new FieldRenderer({
    readModeStrategy: "virtual",
    read: function (fieldComponent) {
        let h = fieldComponent.h,
            context = fieldComponent.cpi.getContext(),
            { field, model, row, value } = context;

        return h(
            "input",
            {
                value: parseDate(value),
                styles: styles.default,
                type: "date",
                // To render a date in the proper format, let's use an input element.
                // However, we'll need to make it `readonly` so users cannot
                // update the value without entering edit mode. Otherwise, the
                // `oninput` functions below will not work.
                afterCreate(element) {
                    element.setAttribute('readonly', true)
                },
            }
        )
    },
    editModeStrategy: "virtual",
    edit: function (fieldComponent) {
        let h = fieldComponent.h,
            context = fieldComponent.cpi.getContext(),
            { field, model, row, value } = context;

        return h(
            "input",
            {
                value: parseDate(value),
                styles: styles.default,
                type: "date",
                afterCreate(element) {
                    // While the default styles are applied in the VNode,
                    // let's also apply the edit styles after the element is created.
                    $(element).css(styles.edit);
                },
                onfocus(event) {
                    $(event.target).css(styles.focused);
                },
                oninput(event) {
                    model.updateRow(row,
                        { [field.id]: event.target.value },
                        { initiatorId: fieldComponent.id }
                    );
                },
                onblur(event) {
                    fieldComponent.cpi.onInputBlur();
                },
            },
        );
    },
});