WebBuild/wwwroot/platform/controls/datepicker/datepicker.component.js

var Unibase;
(function (Unibase) {
    let Forms;
    (function (Forms) {
        let Controls;
        (function (Controls) {
            class DatePicker {
                constructor() {
                    this._bizgaze_dateFormat = 'DD/MM/YYYY';
                    this.IsTimePicker = false;
                    this._time = false;
                    this.propval = "";
                    this.dtime = false;
                    this.disableFutureDate = false;
                }
                init(formpropertyid, prop, callback) {
                    var instance = DatePicker.Instance();
                    let TimePicker = prop.PropertySettings.filter(t => t.ControlPropertyName == "IsTime" && t.ControlPropertyValue == "true");
                    if (TimePicker.length > 0) {
                        instance.IsTimePicker = true;
                    }
                    else {
                        instance.IsTimePicker = false;
                    }
                    if (callback != null && callback != 1)
                        callback();
                    instance.loadControlSettings(prop.ControlJsonText, prop.FormPropertyId);
                    var container = "control-container-" + formpropertyid;
                    $("#" + container).find('#date_' + prop.FormPropertyId + '.datepicker-input').on('apply.daterangepicker', function (ev, picker) {
                        $("#" + container).find('#date_' + prop.FormPropertyId).val(picker.startDate.format('YYYY/MM/DD'));
                    });
                    var currentYear = (new Date()).getFullYear();
                    if (this._time == true) {
                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').daterangepicker({
                            autoUpdateInput: false,
                            timePicker: true,
                            timePicker24Hour: true,
                            locale: {
                                format: 'DD/MM/YYYY HH:mm',
                                firstDay: 1,
                            },
                            singleDatePicker: true,
                            showDropdowns: true,
                            minYear: 1901,
                        });
                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').on('apply.daterangepicker', function (ev, picker) {
                            $("#" + container).find('#date_' + formpropertyid).val(picker.startDate.format('DD/MM/YYYY HH:mm'));
                            $("#" + container).find('#hfdate_' + formpropertyid).val(picker.startDate.format('YYYY/MM/DD HH:mm'));
                        });
                        this._time = false;
                    }
                    else {
                        $("#" + container).find('#date_' + prop.FormPropertyId).daterangepicker({
                            locale: {
                                format: 'DD/MM/YYYY',
                                firstDay: 1,
                            },
                            singleDatePicker: true,
                            showDropdowns: true,
                            minYear: 1901,
                            maxDate: new Date(2050, 11, 31)
                        }, function (start, end, label) {
                            $("#" + container).find('#hfdate_' + prop.FormPropertyId).val(end.format('YYYY-MM-DD'));
                        });
                    }
                    if (instance.propval == "") {
                        $("#" + container).find('#date_' + prop.FormPropertyId).val('');
                    }
                    $(".date_" + prop.DocPropertyName).keypress(function (e) {
                        $(".date_" + prop.DocPropertyName).attr("maxlength", "10");
                        if (e.which != 8 && e.which != 0 && (e.which < 47 || e.which > 57)) {
                            return false;
                        }
                        else {
                            var value = $(".date_" + prop.DocPropertyName).val().toString().replace(/^(\d\d)(\d)$/g, '$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g, '$1/$2').replace(/[^\d\/]/g, '');
                            $(".date_" + prop.DocPropertyName).val(value);
                        }
                    });
                    $(".date_" + prop.DocPropertyName).focusout(function (e) {
                        if ($(".date_" + prop.DocPropertyName).val() == "") {
                            $('#hfdate_' + prop.FormPropertyId).val("");
                        }
                    });
                    instance.loadPropertySettings(prop.PropertySettings, formpropertyid, prop.DocPropertyName);
                }
                loadControl(containerid, prop) {
                    var regExpr = "";
                    var ErrMsg = "";
                    var validationlist = prop.Validations;
                    if (validationlist != null) {
                        for (var i = 0; i < validationlist.length; i++) {
                            regExpr += validationlist[i].RegularExp + '||';
                            ErrMsg += validationlist[i].ErrorMessage + '||';
                        }
                    }
                    var Isrequired = prop.IsRequired != true ? 'hidden' : '';
                    var requiredClass = prop.IsRequired != true ? '' : 'required';
                    var reqMark = prop.IsRequired != true ? '' : '*';
                    var CurrentStageId = $("#hf_" + $("#hfLayout_InstalledPageId").val() + "_StageId").val();
                    if (prop.IncludedStages != null && prop.IncludedStages != "") {
                        var StagesForRequired = prop.IncludedStages.split('|');
                        Isrequired = StagesForRequired.find(x => x == CurrentStageId) ? '' : 'hidden';
                        requiredClass = StagesForRequired.find(x => x == CurrentStageId) ? 'required' : '';
                        reqMark = StagesForRequired.find(x => x == CurrentStageId) ? '*' : '';
                    }
                    if (prop.ExcludedStages != null && prop.ExcludedStages != "") {
                        var ExcludedStages = prop.ExcludedStages.split('|');
                        Isrequired = ExcludedStages.find(x => x == CurrentStageId) ? 'hidden' : '';
                        requiredClass = ExcludedStages.find(x => x == CurrentStageId) ? '' : 'required';
                        reqMark = ExcludedStages.find(x => x == CurrentStageId) ? '' : '*';
                    }
                    let ControlId = 'txt_' + prop.DocPropertyId;
                    if (prop.IsRequired)
                        requiredClass = 'required';
                    let isReadOnly = '';
                    if (!Unibase.Themes.Compact.Components.Index.Instance().desktopMode) {
                        isReadOnly = 'readonly';
                    }
                    const { helpTooltipHtml, helpTextHtml, helpClass } = Unibase.Platform.Forms.Components.FormViewer.Instance().getControlHelpHtml(prop);
                    let html = `<div class="floating-label-form-group CancelBtnFloating_${prop.UniqueId} ${helpClass}" id ="div_${prop.UniqueId}">` +
                        '<label for="lbl" id="lbl_' + prop.ControlId + '">' + helpTooltipHtml + '<span class="label-name">' + prop.LabelName + '</span><span class="text-danger ' + Isrequired + '" id="spnIsRequired_' + prop.DocPropertyId + '"> *</span></label>' +
                        '<div class="input-group">' +
                        '<input type="hidden" id="hfdate_' + prop.UniqueId + '" class="value-control hfdate_' + prop.DocPropertyName + '" value=""/>' +
                        '<input type="text" id="date_' + prop.UniqueId + '" class="form-control   type-control datepicker-input hasDatepicker ' + requiredClass + ' floating-label-control txt_' + prop.UniqueId + ' date_' + prop.DocPropertyName + '" placeholder="' + prop.LabelName + " " + reqMark + '" data-placeholder="' + prop.Placeholder + '" data-label="' + prop.LabelName + " " + reqMark + '" data-regularexp="' + regExpr + '" data-validatemsg="' + ErrMsg + '"' + isReadOnly + '>' +
                        '<span class="input-group-addon mt-10 cursor-pointer"><i class="fa fa-calendar calender_' + prop.DocPropertyName + '"></i></span>' +
                        '<input type="hidden" id="hf_' + prop.ControlId + '" /></div>' + helpTextHtml + '</div>';
                    $("#" + containerid).append(html);
                    Unibase.Forms.Controls.DatePicker.Instance().loadDate(prop.UniqueId, prop);
                }
                loadControlSettings(controlsettingjson, formpropertyid) {
                    return null;
                }
                loadDate(formpropertyid, prop) {
                    var container = "control-container-" + formpropertyid;
                    if (this._time == true) {
                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').daterangepicker({
                            autoUpdateInput: false,
                            timePicker: true,
                            timePicker24Hour: true,
                            locale: {
                                format: 'DD/MM/YYYY HH:mm',
                                firstDay: 1,
                            },
                            singleDatePicker: true,
                            showDropdowns: true,
                            minYear: 1901,
                        });
                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').on('apply.daterangepicker', function (ev, picker) {
                            $("#" + container).find('#date_' + formpropertyid).val(picker.startDate.format('DD/MM/YYYY HH:mm'));
                            $("#" + container).find('#hfdate_' + formpropertyid).val(picker.startDate.format('YYYY/MM/DD HH:mm'));
                        });
                        this._time = false;
                    }
                    else {
                        $("#" + container).find('#date_' + prop.FormPropertyId).daterangepicker({
                            locale: {
                                format: 'DD/MM/YYYY',
                                firstDay: 1,
                            },
                            singleDatePicker: true,
                            showDropdowns: true,
                            minYear: 1901,
                        }, function (start, end, label) {
                            $("#" + container).find('#hfdate_' + prop.FormPropertyId).val(end.format('YYYY-MM-DD'));
                        });
                    }
                    $(`.calender_${prop.DocPropertyName}`).click(function () {
                        $(this).parents('.input-group').find('.datepicker-input').trigger('click');
                    });
                }
                loadPropertySettings(propertysettings, formpropertyid, DocPropertyName) {
                    var instance = this;
                    var istime = false;
                    var dateNow = new Date();
                    var container = "control-container-" + formpropertyid;
                    if (propertysettings != null) {
                        for (var i = 0; i < propertysettings.length; i++) {
                            var data = propertysettings[i];
                            if (data.ControlPropertyName == "IsTodayDate") {
                                if (data.ControlPropertyValue == "true") {
                                    var DateTime_Value = $("#" + container).find('#date_' + formpropertyid).val();
                                    if (DateTime_Value == "") {
                                        var maxDate;
                                        if (instance.disableFutureDate)
                                            maxDate = new Date();
                                        else
                                            maxDate = new Date(2050, 11, 31);
                                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').daterangepicker({
                                            singleDatePicker: true,
                                            showDropdowns: true,
                                            minYear: 1901,
                                            locale: {
                                                format: 'DD/MM/YYYY',
                                                firstDay: 1,
                                            },
                                            maxDate: maxDate
                                        });
                                        var todayDate = $("#" + container).find('#date_' + formpropertyid).val();
                                        var hfformat = "YYYY/MM/DD";
                                        var tdate = moment(todayDate, "DD/MM/YYYY").format("YYYY/MM/DD");
                                        $("#" + container).find('#hfdate_' + formpropertyid).val(tdate);
                                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').on('apply.daterangepicker', function (ev, picker) {
                                            $("#" + container).find('#date_' + formpropertyid).val(picker.startDate.format('DD/MM/YYYY'));
                                            $("#" + container).find('#hfdate_' + formpropertyid).val(picker.startDate.format('YYYY/MM/DD'));
                                            $("#" + container).find('#div_' + formpropertyid).addClass('floating-label-form-group-with-value');
                                        });
                                    }
                                    $("#" + container).find('#div_' + formpropertyid).addClass('floating-label-form-group-with-value');
                                    $("#" + container).find('#date_' + formpropertyid).keypress(function (e) {
                                        $(this).attr("maxlength", "10");
                                        if (e.which != 8 && e.which != 0 && (e.which < 47 || e.which > 57)) {
                                            return false;
                                        }
                                        else {
                                            var value = $(this).val().toString().replace(/^(\d\d)(\d)$/g, '$1/$2').replace(/^(\d\d\/\d\d)(\d+)$/g, '$1/$2').replace(/[^\d\/]/g, '');
                                            $(this).val(value);
                                        }
                                    });
                                    if (instance.dtime == false) {
                                        if (istime == true) {
                                            var DateTime_Value = $("#" + container).find('#date_' + formpropertyid).val();
                                            $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').daterangepicker({
                                                autoUpdateInput: false,
                                                timePicker: true,
                                                timePicker24Hour: true,
                                                singleDatePicker: true,
                                                showDropdowns: true,
                                                minYear: 1901,
                                                locale: {
                                                    format: 'DD/MM/YYYY HH:mm',
                                                    firstDay: 1,
                                                },
                                            });
                                            var cdate = new Date();
                                            var currentdate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalTime(cdate, "DD/MM/YYYY HH:mm");
                                            $("#" + container).find('#date_' + formpropertyid).val(currentdate);
                                            var hfcdate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatServerLocalDateTime(cdate, "YYYY/MM/DD HH:mm");
                                            $("#" + container).find('#hfdate_' + formpropertyid).val(hfcdate);
                                            $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').on('apply.daterangepicker', function (ev, picker) {
                                                $("#" + container).find('#date_' + formpropertyid).val(picker.startDate.format('DD/MM/YYYY HH:mm'));
                                                $("#" + container).find('#hfdate_' + formpropertyid).val(picker.startDate.format('YYYY/MM/DD HH:mm'));
                                            });
                                            let curren = new Date();
                                            $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').on('show.daterangepicker', function (ev, picker) {
                                                var dateTime_New = $("#" + container).find('#date_' + formpropertyid).val();
                                                var hours = dateTime_New.toString().substring(dateTime_New.toString().indexOf(":") - 2, dateTime_New.toString().indexOf(":"));
                                                if (hours.substring(0, 1) == "0") {
                                                    hours = hours.substring(1);
                                                }
                                                var minutes = dateTime_New.toString().substring(dateTime_New.toString().indexOf(":") + 1, dateTime_New.toString().indexOf(":") + 3);
                                                if (minutes.substring(0, 1) == "0") {
                                                    minutes = minutes.substring(1);
                                                }
                                                $('.show-calendar').find('.hourselect option:selected').removeAttr('selected');
                                                $('.show-calendar').find('.minuteselect option:selected').removeAttr('selected');
                                                $('.hourselect option[value="' + hours + '"]').attr("selected", "selected");
                                                $('.minuteselect option[value="' + minutes + '"]').attr("selected", "selected");
                                            });
                                        }
                                    }
                                }
                            }
                            if (data.ControlPropertyName == "IsTime") {
                                if (instance.dtime == false) {
                                    if (data.ControlPropertyValue == "true") {
                                        istime = true;
                                        var DateTime_Value = $("#" + container).find('#date_' + formpropertyid).val();
                                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').daterangepicker({
                                            autoUpdateInput: false,
                                            timePicker: true,
                                            timePicker24Hour: true,
                                            singleDatePicker: true,
                                            showDropdowns: true,
                                            minYear: 1901,
                                            locale: {
                                                format: 'DD/MM/YYYY HH:mm',
                                                firstDay: 1,
                                            },
                                        });
                                        var cdate = new Date();
                                        var currentdate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalTime(cdate, "DD/MM/YYYY HH:mm");
                                        $("#" + container).find('#date_' + formpropertyid).val(currentdate);
                                        var hfcdate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatServerLocalDateTime(cdate, "YYYY/MM/DD HH:mm");
                                        $("#" + container).find('#hfdate_' + formpropertyid).val(hfcdate);
                                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').on('apply.daterangepicker', function (ev, picker) {
                                            $("#" + container).find('#date_' + formpropertyid).val(picker.startDate.format('DD/MM/YYYY HH:mm'));
                                            $("#" + container).find('#hfdate_' + formpropertyid).val(picker.startDate.format('YYYY/MM/DD HH:mm'));
                                        });
                                        let curren = new Date();
                                        $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').on('show.daterangepicker', function (ev, picker) {
                                            var dateTime_New = $("#" + container).find('#date_' + formpropertyid).val();
                                            var hours = dateTime_New.toString().substring(dateTime_New.toString().indexOf(":") - 2, dateTime_New.toString().indexOf(":"));
                                            if (hours.substring(0, 1) == "0") {
                                                hours = hours.substring(1);
                                            }
                                            var minutes = dateTime_New.toString().substring(dateTime_New.toString().indexOf(":") + 1, dateTime_New.toString().indexOf(":") + 3);
                                            if (minutes.substring(0, 1) == "0") {
                                                minutes = minutes.substring(1);
                                            }
                                            $('.show-calendar').find('.hourselect option:selected').removeAttr('selected');
                                            $('.show-calendar').find('.minuteselect option:selected').removeAttr('selected');
                                            $('.hourselect option[value="' + hours + '"]').attr("selected", "selected");
                                            $('.minuteselect option[value="' + minutes + '"]').attr("selected", "selected");
                                        });
                                        $(".hasDatepicker").keypress(function (e) {
                                            $(this).attr("maxlength", "19");
                                            var value = $(this).val().toString().replace(/^(\d\d\/\d\d)(\d+)$/g, '$1/$2').replace(/^(\d\d\/\d\d\/\d\d\d\d)(\d)/g, '$1 ').replace(/^(\d\d\/\d\d\/\d\d\d\d\s\d\d)(\d)/g, '$1:$2$2:');
                                            $(this).val(value);
                                        });
                                    }
                                }
                            }
                            if (data.ControlPropertyName == "DisableFutureDate") {
                                if (data.ControlPropertyValue == "true") {
                                    $("#" + container).find('#date_' + formpropertyid + '.datepicker-input').daterangepicker({
                                        singleDatePicker: true,
                                        showDropdowns: true,
                                        autoUpdateInput: false,
                                        minYear: 1901,
                                        maxDate: new Date(),
                                        locale: {
                                            format: 'DD/MM/YYYY',
                                            firstDay: 1,
                                        },
                                    }, function (start, end, label) {
                                        $("#" + container).find('#hfdate_' + formpropertyid).val(end.format('YYYY-MM-DD'));
                                    });
                                    $('#date_' + formpropertyid + '.datepicker-input').keyup(function (e) {
                                        let dateString = $(this).val();
                                        let errorMsgDiv = $(this).parents('.formValidate').find('.form-error-message').attr('id');
                                        let myDate = moment(dateString, ['DD/MM/YYYY', 'D/M/YYYY', 'DD/M/YYYY', 'D/MM/YYYY'], true);
                                        MessageHelper.Instance().hideMessage();
                                        $(this).attr('data-isValid', 'false');
                                        if (dateString.length >= 8 && dateString != "") {
                                            if (myDate.isValid() == false) {
                                                MessageHelper.Instance().showError('Enter Correct Date Format!.', errorMsgDiv);
                                            }
                                            else if (moment(dateString, 'DD/MM/YYYY').isSameOrBefore(moment().format()) == false) {
                                                MessageHelper.Instance().showError('You cannot enter a date in the future.', errorMsgDiv);
                                            }
                                            else if (moment(dateString, 'DD/MM/YYYY').isSameOrAfter('01/01/1901', 'year') == false) {
                                                MessageHelper.Instance().showError('You cannot enter a date before 1901.', errorMsgDiv);
                                            }
                                            else {
                                                MessageHelper.Instance().hideMessage();
                                                $('#hfdate_' + formpropertyid).val(moment(dateString, 'DD/MM/YYYY').format('YYYY-MM-DD'));
                                                $(this).attr('data-isValid', 'true');
                                            }
                                        }
                                    });
                                    instance.disableFutureDate = true;
                                    $('#date_' + formpropertyid + '.datepicker-input').focusout(function (e) {
                                        let isDateValid = $(this).attr('data-isValid');
                                        if (isDateValid == 'false') {
                                            $(this).val("");
                                            $('#hfdate_' + formpropertyid).val("");
                                            $(this).attr('data-isValid', 'true');
                                        }
                                    });
                                }
                            }
                        }
                    }
                    instance.propval = "";
                    instance.dtime = false;
                }
                bindEditFormDetails(formpropertyid, propval, DocPropertyName) {
                    var instance = this;
                    var format = "DD/MM/YYYY";
                    var hfformat = "YYYY/MM/DD";
                    var hfdate = "";
                    if (instance.IsTimePicker) {
                        instance.propval = moment(propval).format("DD/MM/YYYY HH:mm");
                        hfdate = moment(propval).format("YYYY/MM/DD HH:mm");
                        instance._time = true;
                        $('#date_' + formpropertyid + '.datepicker-input').daterangepicker({
                            autoUpdateInput: false,
                            timePicker: true,
                            timePicker24Hour: true,
                            singleDatePicker: true,
                            showDropdowns: true,
                            minYear: 1901,
                            locale: {
                                format: 'DD/MM/YYYY HH:mm',
                                firstDay: 1,
                            },
                        });
                        instance.dtime = true;
                    }
                    else {
                        instance.propval = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalDate1(propval, format);
                        hfdate = Unibase.Platform.Helpers.DateTimeHelper.Instance().formatServerLocalDate(propval, hfformat);
                    }
                    var formattedPropVal = Unibase.Platform.Helpers.DateTimeHelper.Instance().serverDateformat(instance.propval);
                    if (instance.propval == "Invalid date" || formattedPropVal == "01/01/1901" || formattedPropVal == "01/01/1900" || formattedPropVal == "01/01/2001" || formattedPropVal == "01/01/0001") {
                        instance.propval = "";
                    }
                    $("#hfdate_" + formpropertyid).val(hfdate);
                    $("#date_" + formpropertyid).val(instance.propval);
                    if ($("#date_" + formpropertyid).val() != "") {
                        $("#div_" + formpropertyid).addClass("floating-label-form-group-with-value");
                    }
                }
                static Instance() {
                    if (this.instance === undefined)
                        this.instance = new DatePicker();
                    return this.instance;
                }
            }
            Controls.DatePicker = DatePicker;
        })(Controls = Forms.Controls || (Forms.Controls = {}));
    })(Forms = Unibase.Forms || (Unibase.Forms = {}));
})(Unibase || (Unibase = {}));