https://www.portaldoservidor.ms.gov.br/js/App/Components/datePicke…NVBkU-xOwwuxnJF07oJlSPEFh8OoTA9KqjthyIlBlfY

1(function () {
2    'use strict';
3
4    angular.module('PortalApp').component('datePickerComponent', {
5        template: `
6            <div class="input-group has-validation">
7                <input type="text"
8                       class="form-control"
9                       id="{{$ctrl.name}}"
10                       name="{{$ctrl.name}}"
11                       ng-class="{'is-valid': (!$ctrl.form[$ctrl.name].$pristine && $ctrl.form[$ctrl.name].$valid), 'is-invalid': ($ctrl.form[$ctrl.name].$invalid)}"
12                       placeholder="DD/MM/AAAA"
13                       uib-datepicker-popup="{{$ctrl.format}}"
14                       ng-model="$ctrl.displayDate"
15                       is-open="$ctrl.popup.opened"
16                       datepicker-options="$ctrl.dateOptions"
17                       ng-required="$ctrl.ngRequired"
18                       ng-disabled="$ctrl.ngDisabled"
19                       close-text="Fechar"
20                       clear-text="Limpar"
21                       current-text="Hoje"
22                       alt-input-formats="$ctrl.altInputFormats"
23                       ng-model-options="{timezone: 'utc'}"
24                       model-view-value="true"
25                       ui-mask="99/99/9999"
26                       ui-mask-placeholder
27                       ui-mask-placeholder-char="_"/>
28                <button type="button" class="btn btn-outline-secondary" ng-click="$ctrl.open($event)" ng-disabled="$ctrl.ngDisabled">
29                    <i class="fa fa-calendar"></i>
30                </button>
31                 <div class="invalid-feedback" ng-show="!$ctrl.form[$ctrl.name].$pristine && $ctrl.form[$ctrl.name].$error.parse">
32                    Data é inválida.
33                </div>
34                <div class="invalid-feedback" ng-show="!$ctrl.form[$ctrl.name].$pristine && $ctrl.form[$ctrl.name].$error.required">
35                    Data é obrigatória.
36                </div>
37                <div class="invalid-feedback" ng-show="!$ctrl.form[$ctrl.name].$pristine && $ctrl.form[$ctrl.name].$error.date">
38                    Data é inválida
39                </div>
40            </div>
41        `,
42        bindings: {
43            model: '=', // Binding do modelo
44            name: '@', // Binding do nome do campo
45            ngRequired : '<', // Para definir se o campo é obrigatório
46            form: '<', // Formulário 
47            minDate: '<',
48            maxDate: '<',
49            ngDisabled: '<',
50            onChange: '&',
51            datesDisabled: '<' 
52        },
53        controller: datePickerController
54    });
55
56    function datePickerController($scope, $timeout) {
57
58        var ctrl = this;
59        ctrl.formatos = ["YYYY-MM-DDTHH:mm:ss", "YYYY-MM-DD"];
60        ctrl.dateOptions = {
61            formatYear: 'yy',
62            startingDay: 1,
63            language: 'pt-br',
64            minDate: '',
65            maxDate: '',
66            dateDisabled: function (data) {
67                return ctrl.dateDisabled(data.date, data.mode);
68            }
69        };
70        ctrl.format = 'dd/MM/yyyy'; // Formato para exibição
71        ctrl.altInputFormats = ['M!/d!/yyyy'];
72        ctrl.popup = {
73            opened: false
74        };
75
76        ctrl.displayDate = null;
77
78        ctrl.open = function ($event) {
79            $event.preventDefault();
80            $event.stopPropagation();
81            ctrl.popup.opened = true; // Abre o date picker
82        };
83
84        ctrl.$onInit = function () {
85
86            $scope.$watch(() => ctrl.datesDisabled, (newValue) => {
87                if (newValue && Array.isArray(newValue)) {
88
89                    const normalizadas = newValue.map(d =>
90                        moment(d, ctrl.formatos, true).isValid()
91                            ? moment(d).format('YYYY-MM-DD')
92                            : d
93                    );
94
95                    ctrl.datasDisabledSet = new Set(normalizadas);
96
97                } else {
98                    ctrl.datasDisabledSet = new Set();
99                }
100            });
101
102            $scope.$watch(() => ctrl.maxDate, (newValue) => {
103                var data = moment(newValue, ctrl.formatos, true);
104                if (data.isValid()) {
105                    ctrl.dateOptions.maxDate = moment(newValue).toDate();
106                } else {
107                    ctrl.dateOptions.maxDate = null;
108                }
109            });
110
111            $scope.$watch(() => ctrl.minDate, (newValue) => {
112                var data = moment(newValue, ctrl.formatos, true);
113                if (data.isValid()) {
114                    ctrl.dateOptions.minDate = moment(newValue).toDate();
115                } else {
116                    ctrl.dateOptions.minDate = null;
117                }
118            });
119
120            // Converte o modelo ISO para a data a ser exibida no input
121            $scope.$watch(() => ctrl.model, (newValue) => {
122                var data = moment(newValue, ctrl.formatos, true);
123                if (data.isValid()) {
124                    ctrl.displayDate = moment(ctrl.model).toDate();
125                } else {
126                    ctrl.displayDate = null;
127                }
128            });
129
130

131            // Observe mudanças no displayDate para atualizar o modelo
132            $scope.$watch(() => ctrl.displayDate, (newValue) => {
133                if (newValue) {
134                    ctrl.model = moment(newValue).format("YYYY-MM-DDTHH:mm:ss");                    
135                } else {
136                    ctrl.model = null;
137                }
138                ctrl.onChange()
139            });
140        };
141
142        ctrl.dateDisabled = function (date, mode) {
143
144            if (mode !== 'day') return false;
145
146            if (!ctrl.datasDisabledSet || ctrl.datasDisabledSet.size === 0) {
147                return false; 
148            }
149
150            const dataFormatada = moment(date).format('YYYY-MM-DD');
151
152            console.log(dataFormatada, !ctrl.datasDisabledSet.has(dataFormatada))
153
154            return !ctrl.datasDisabledSet.has(dataFormatada);
155        };
156
157
158    }
159})();