gd-sprest-bs/build/components/datetime/index.js

SharePoint JavaScript, TypeScript and Web Components designed using the Bootstrap framework.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateTimeControlType = exports.DateTime = void 0;
require("flatpickr");
var gd_bs_1 = require("gd-bs");
/**
 * Date/Time
 */
var DateTime = function (props) {
    // Create the date/time element
    var elDateTime = document.createElement("div");
    elDateTime.className = "date-time";
    // Create the textbox
    var textbox = gd_bs_1.Components.InputGroup({
        el: elDateTime,
        label: props.label,
        isDisabled: props.disabled,
        onChange: props.onChange
    });
    // Get the options and default the values
    var options = props.options || {};
    options.enableTime = props.showTime;
    options.dateFormat = options.dateFormat || ("m-d-Y" + (props.showTime ? " h:i K" : ""));
    // See if the value is a string
    if (props.value && typeof (props.value) === "string") {
        options.defaultDate = new Date(props.value);
    }
    else {
        // Set the value
        options.defaultDate = props.value;
    }
    // Apply the plugin
    var datetime = flatpickr(textbox.el.querySelector("input"), options);
    // See if we are disabling the component
    if (props.disabled) {
        // Remove the read-only setting set by the flatpickr
        textbox.elTextbox.readOnly = false;
    }
    // Create the element
    var el = document.createElement("div");
    el.appendChild(elDateTime);
    // See if we are rendering it to an element
    if (props.el) {
        // Ensure the parent element exists
        if (props.el.parentElement && props.el.parentElement.classList) {
            // Set the bootstrap class
            props.el.parentElement.classList.contains("bs") ? null : props.el.parentElement.classList.add("bs");
        }
        // Append the elements
        while (el.children.length > 0) {
            props.el.appendChild(el.children[0]);
        }
        // Update the element
        el = props.el;
    }
    else {
        // Set the bootstrap class
        el.classList.add("bs");
    }
    // Create the object
    var obj = {
        el: elDateTime,
        flatpickrObj: datetime,
        getDate: function () { return datetime.selectedDates[0]; },
        getValue: function () { return textbox.getValue(); },
        setValue: function (dt, dtFormat) {
            // Default the format
            dtFormat = dtFormat || (props.options ? props.options.dateFormat : null);
            // Set the date/time
            datetime.setDate(dt, true, dtFormat);
        }
    };
    // Execute the assign to event
    props.assignTo ? props.assignTo(obj) : null;
    // Return the object
    return obj;
};
exports.DateTime = DateTime;
// Customize the form control
exports.DateTimeControlType = 100;
gd_bs_1.Components.FormControlTypes["DateTime"] = exports.DateTimeControlType;
gd_bs_1.Components.CustomControls.registerType(exports.DateTimeControlType, function (props) {
    var dt = null;
    // Set the created method
    var onRendered = props.onControlRendered;
    props.onControlRendered = function (ctrl) {
        // Render a date/time
        dt = (0, exports.DateTime)({
            className: props.className,
            disabled: props.isDisabled || props.isReadonly,
            el: ctrl.el,
            options: props.options,
            showTime: props.showTime,
            value: props.value
        });
        // See if the label exists
        var elLabel = ctrl["_elLabel"];
        if (elLabel) {
            // Set the id and aria properties
            elLabel ? elLabel.id = (props.id || props.name) + "_label" : null;
            dt.el.querySelector("input").setAttribute("aria-labelledby", elLabel.id);
        }
        // Set the control
        ctrl.setControl(dt);
        // Call the custom render event
        onRendered ? onRendered(ctrl) : null;
    };
    var onValidate = props.onValidate;
    props.onValidate = function (ctrl, result) {
        // See if the field is required
        if (ctrl.required) {
            // Get the date field elements
            var elDateElements = dt.el.querySelectorAll(".form-control");
            for (var i = 0; i < elDateElements.length; i++) {
                // Get the visible input element
                var elDateElement = elDateElements[i];
                if (elDateElement.type != "hidden") {
                    // See if the value exists
                    if (result.value) {
                        // Update the classes
                        elDateElement.classList.remove("is-invalid");
                        elDateElement.classList.add("is-valid");
                    }
                    else {
                        // Update the classes
                        elDateElement.classList.remove("is-valid");
                        elDateElement.classList.add("is-invalid");
                    }
                }
            }
        }
        // Call the onvalidate event
        var returnVal = onValidate ? onValidate(ctrl, result) : null;
        // Return the result
        return returnVal || result;
    };
    // Register a people picker
    props.onGetValue = function (ctrl) {
        // Return the value
        return dt ? dt.getDate() : ctrl.value;
    };
});