@uicapivara/cp-date/src/component/date.component.ts

cp-date

import $ from 'jquery';
import 'jquery-datetimepicker/build/jquery.datetimepicker.min.css';
import 'jquery-datetimepicker';

export class CapivaraDate {
    public $constants;
    public $functions;
    public $bindings;
    private element;
    private oi;
    private inputElement;

    constructor($scope, $element) {
        this.element = $element;
        this.$constants = this.$constants || {};
    }

    $onViewInit() {
        this.inputElement = this.element.querySelector('input.cp-date');
        if (typeof this.$bindings.cpModel === 'string') {
            this.$bindings.cpModel = new Date(this.$bindings.cpModel);
        }
        if(this.$bindings.cpModel == 'Invalid Date'){
            delete this.$bindings.cpModel;
        }
        this.setModelInInput();
        this.createCpDate();
    }

    $onChanges = (changes) => {
        if (changes && changes[0] && changes[0].name == 'cpModel') {
            this.setModelInInput();
        }
    }

    /**
     * @method void Method responsible for start and configurate the CpDate
     */
    createCpDate() {
        $.datetimepicker.setLocale(this.$constants.language || 'pt-BR')
        $(this.inputElement).datetimepicker({
            timepicker: this.$constants.timepicker == undefined ? true : this.$constants.timepicker,
            datepicker: this.$constants.datepicker == undefined ? true : this.$constants.datepicker,
            format: this.$constants.format == undefined ? 'd/m/Y H:i' : this.$constants.format,
            mask: this.$constants.mask == undefined ? true : this.$constants.mask,
            inline: this.$constants.openedCalendar == undefined ? false : this.$constants.openedCalendar,
            allowTimes: this.$constants.allowedTimes || [],
            defaultTime: this.$constants.defaultTime == undefined ? false : this.$constants.defaultTime,
            defaultDate: this.$constants.defaultDate == undefined ? false : this.$constants.defaultDate,
            step: this.$constants.step || 60,
            weeks: this.$constants.weekNumbers == undefined ? false : this.$constants.weekNumbers,
            yearStart: this.$constants.yearStart || 1950,
            yearEnd: this.$constants.yearEnd || 2050,
            dayOfWeekStart: this.$constants.dayOfWeekStart || 0,
            disabledDates: this.$constants.disabledDates || [],
            minDate: this.$constants.minDate == undefined ? false : this.$constants.minDate,
            maxDate: this.$constants.maxDate == undefined ? false : this.$constants.maxDate,
            onChangeDateTime: (dp, $input) => {
                if(this.$constants.openCalendar){
                    this.setModelInInput();
                }
                $(this.inputElement).datetimepicker({mask: this.$constants.mask == undefined ? true : this.$constants.mask})
                this.$bindings.cpModel = dp;
               
            }
        });
    }

    /**
     * @method boolean Method responsible to check if the user selected an allowed time.
     * @param informedDate Date Object
     */
    isAllowedTimes(informedDate: Date): boolean {   
        if(!this.$constants.allowedTimes) return true;
        try{
            const fullTime = informedDate instanceof Date ? informedDate.getHours() + ':' + ('0' + informedDate.getMinutes()).slice(-2) : new Date(informedDate).getHours() + ':' + ('0' + new Date(informedDate).getMinutes()).slice(-2)
            return this.$constants.allowedTimes.filter((validTime) => validTime == fullTime).length > 0;
        }catch (e) { return false }
    }

    /**
     * @method boolean Method responsible to check if the user selected a min allowed date.
     * @param informedDate Date Object
     */
    isAllowedMinDate(informedDate: Date): boolean {
        if (!this.$constants.minDate) return true;
        try {
            const min = this.$constants.minDate instanceof Date ? this.$constants.minDate : new Date(this.$constants.minDate);
            return informedDate && (informedDate.getTime() >= min.getTime());
        } catch (e) { return false; }
    }

    /**
     * @method boolean Method responsible to check if the user selected a max allowed date.
     * @param informedDate Date Object
     */
    isAllowedMaxDate(informedDate: Date): boolean {
        if (!this.$constants.maxDate) return true;
        try {
            const max = this.$constants.maxDate instanceof Date ? this.$constants.maxDate : new Date(this.$constants.maxDate);
            max.setHours(23);
            max.setMinutes(59);
            max.setSeconds(59);
            return informedDate && (informedDate.getTime() <= max.getTime());
        } catch (e) { return false; }
    }

    /**
     * @method boolean Method responsible to check if the user selected a max allowed date.
     * @param informedDate Date Object
     */
    isDisabledDate(informedDate: Date): boolean {
        if (!this.$constants.disabledDates) return false;
        return this.$constants.disabledDates.filter((validDate) => {
            const date = validDate instanceof Date ? validDate : new Date(validDate);
            return (date.getDate() == informedDate.getDate() && date.getMonth() == informedDate.getMonth() && date.getFullYear() == informedDate.getFullYear());
        }).length > 0;
    }

    /**
     *@method void This method delete the value inside of the input 
     */
    resetInput() {
        $(this.inputElement).datetimepicker('reset');
    }

    /**
     * @method void Method responsible of setting the value of the model to the input
     */
    setModelInInput() {
        if (this.$bindings.cpModel instanceof Date &&
            this.isAllowedMinDate(this.$bindings.cpModel) &&
            this.isAllowedMaxDate(this.$bindings.cpModel) &&
            !this.isDisabledDate(this.$bindings.cpModel)  && 
            this.isAllowedTimes(this.$bindings.cpModel)) {
                $(this.inputElement).datetimepicker({value: this.$bindings.cpModel });
        } else {
            this.resetInput();
            $(this.inputElement).datetimepicker({mask: this.$constants.mask == undefined ? true : this.$constants.mask})
            this.$bindings.cpModel = null;
        }
    }

}