https://arquivo.pt/js/datepicker.js

1$(function () {
2    //Make sure the targets exist
3    if ($('#search-tools-date-slider').length) {
4
5        //Constants
6        const minDate = new Date(1991, 7, 6);
7        const maxDate = new Date();
8        const minYear = minDate.getFullYear();
9        const maxYear = maxDate.getFullYear();
10        const modal = $('#modal');
11        const inputMask = { regex: "[0-3][0-9]\/[0-1][0-9]\/[1-2][0-9][0-9][0-9]", insertMode: false };
12        var modalDatepickerContent = null;
13        
14        //load modal datepicker template into local variable
15        $.ajax({
16            url: '/partials/modal-datepicker?l='+lang,
17            success: function (data) {
18                modalDatepickerContent = data
19            }
20        });
21
22        //converts yyyymmdd into Date object
23        let stringToDate = function (dateString) {
24            return new Date(dateString.slice(0,4),dateString.slice(4,6)-1,dateString.slice(6,8));
25        }
26
27        //Updates the sliders' positions
28        let updateSlider = function () {
29            $('#slider-range').slider("values", 0, stringToDate($("#start-date").val()).getFullYear());
30            $('#slider-range').slider("values", 1, stringToDate($("#end-date").val()).getFullYear());
31        };
32
33        //Updates the dates and the slider
34        const updateDateSlider = function(newDate,type){
35            $("#" + type + "-date").val([newDate.getFullYear(),('0'+(newDate.getMonth()+1)).slice(-2),('0'+newDate.getDate()).slice(-2)].join(''));
36            $("#" + type + "-year").val(newDate.getFullYear());
37            $("#" + type + "-day-month").val(newDate.getDate() + ' ' + $.datepicker.regional[lang].monthNamesShort[newDate.getMonth()]); //lang is global
38            updateSlider();
39        }
40        //Sets up the logic in the modal
41        let setupModalDatepicker = function (type) {
42            const outInputId = type + '-date';
43            const modalInputId = 'modal-datepicker-input';
44            const modalInput = $('#' + modalInputId);
45
46            $('#modal-datepicker-title').text(translations['modal-datepicker']['header'][type][lang]);
47
48            const submitDate = function (newDate) {
49
50                updateDateSlider(newDate,type)
51                $('#modal-datepicker-datepicker').datepicker('setDate', newDate);
52            }
53
54            //Enter clicks on "ok" button
55            modalInput.on('keyup', function (e) {
56                if ((e.key !== undefined && e.key === 'Enter') || (e.keyCode !== undefined && e.keyCode === 13)) {
57                    $('#modal-datepicker-confirm-button').click()
58                }
59            });
60
61            //Mask input
62            modalInput.inputmask(inputMask);
63            // default input value
64            modalInput.val((() => {
65                const outDateString = $('#' + outInputId).val()
66                return (outDateString.slice(6,8)+'/'+outDateString.slice(4,6)+'/'+outDateString.slice(0,4))
67            })());
68            // on change input
69            modalInput.change(function () {
70                const dateInputValue = $(this).val();
71                // prevent change the date when the user didn't finish inserting a full date on keyboard
72                if (dateInputValue.replace('_', '').length == 10) {
73                    // convert to yyyymmdd
74                    const newDateString = dateInputValue.split('/').reverse().join('');
75                    // update datepicker with newinput value
76                    submitDate(stringToDate(newDateString));
77                }
78            });
79
80            $('#modal-datepicker-datepicker').datepicker({
81                ...$.datepicker.regional[ lang ],
82                monthNamesShort: $.datepicker.regional[ lang ].monthNames, //Display full month names
83                defaultDate: stringToDate($('#' + outInputId).val()), // Set the date to highlight on first opening if the field is blank.
84                inline: true,
85                altField: '#' + modalInputId,
86                dateFormat: "dd/mm/yy",
87                changeMonth: true, // Whether the month should be rendered as a dropdown instead of text.
88                changeYear: true, // Whether the year should be rendered as a dropdown instead of text
89                yearRange: minYear + ":" + maxYear, // The range of years displayed in the year drop-down - minYear and maxYear are a global javascript variables
90                minDate: type === 'start' ? minDate : stringToDate($('#start-

90date').val()),
91                maxDate: type === 'end' ? maxDate : stringToDate($('#end-date').val()),
92                // monthNamesShort: $.datepicker.regional[language].monthNames,
93                onChangeMonthYear: function (y, m, i) {
94                    var d = i.selectedDay;
95
96                    // to prevent the problem when changing from a month with 31 days to a other month with <31 days
97                    // the calendar were going to the first or second day of the next month
98                    function getDaysInMonth(m, y) {
99                        return m === 2 ? y & 3 || !(y % 25) && y & 15 ? 28 : 29 : 30 + (m + (m >> 3) & 1);
100                    }
101                    const minDay = Math.min(getDaysInMonth(m, y), d);
102                    submitDate(new Date(y, m - 1, minDay));
103                },
104                onSelect: function (dateText, inst) {
105                    const newDateText = dateText.split('/').reverse().join('');
106                    const newDate = stringToDate(newDateText);
107                    submitDate(newDate);
108                },
109            });
110
111            //OK button functionality
112            $('#modal-datepicker-confirm-button').click(function () {
113                const dateInputValue = $('#modal-datepicker-input').val();
114                if (dateInputValue.replace('_', '').length == 10) {
115                    const newDateText = dateInputValue.split('/').reverse().join('');
116                    const newDate = stringToDate(newDateText);
117                    // update datepicker with newinput value
118                    submitDate(newDate);
119                }
120                $.modal.close();
121            });
122        }
123
124        //Setup slider
125        $("#slider-range").slider({
126            range: true,
127            min: minYear,
128            max: maxYear,
129            values: [minYear, maxYear],
130
131            //Update datepickers visually as the user drags the slider
132            slide: function (event, ui) {
133                $("#start-year").val(ui.values[0]);
134                $("#end-year").val(ui.values[1]);
135            },
136
137            //Update the datepickers after the user drops the slider
138            stop: function (event, ui) {
139                let startDate = $('#start-date').val();
140                let endDate = $('#end-date').val();
141
142                $('#start-date').val(ui.values[0]+startDate.slice(4));
143                $('#end-date').val(ui.values[1]+endDate.slice(4));
144
145            }
146        });
147
148        //Create datepickers
149        ['start', 'end'].forEach(type => {
150            $(".call-datepicker-" + type + "-year").click(function () {
151                if (isMobile()){
152                    const selectedDate = stringToDate($('#'+type+'-date').val());
153                    $('#'+type+'-date').AnyPicker(
154                        {
155                            mode: "datetime",
156                            dateTimeFormat: "dd MMM yyyy",
157                            inputDateTimeFormat: "yyyyMMdd",
158                            selectedDate: selectedDate,
159                            minValue: type === 'start' ? minDate : stringToDate($('#start-date').val()),
160                            maxValue: type === 'end' ? maxDate : stringToDate($('#end-date').val()),
161                            theme: "iOS",
162                            lang: lang,
163                            onInit: function()
164                            {
165                                this.showOrHidePicker($('#'+type+'-date').val());
166                            },
167                            onChange: function(component_i,row_i,val){
168                                updateDateSlider(val.date,type);
169                            },
170                            buttonClicked: function(buttonType){
171                                if(buttonType == 'cancel'){
172                                    updateDateSlider(selectedDate,type);
173                                }
174                            }
175                        });
176                } else {
177                    modal.html(modalDatepickerContent);
178                    setupModalDatepicker(type);
179                    modal.modal();

180                    $('#modal-datepicker-input').select();
181                    $('#modal-datepicker-input')[0].setSelectionRange(0, 0);
182                }
183            });
184        });
185
186        $('#submit-search').submit(function () {
187            const startDate = stringToDate($('#start-date'));
188            const endDate = stringToDate($('#end-date'));
189            if (startDate > endDate) {
190                modal.html('<h4 class="modalTitle"><i class="fa" aria-hidden="true"></i> ' + 'ERRO' + '</h4>' + //FIX
191                    '<div class="row"><a href="#close" rel="modal:close" class="col-xs-6 text-center leftAnchor modalOptions">OK</a></div>'
192                );
193                return false;
194            }
195            //Make sure pressing enter does not submit the search while modal is active
196            if ($('.jquery-modal.blocker').length) {
197                return false;
198            }
199            return true;
200        });
201
202        //Make sure slider is properly set
203        updateSlider();
204    }
205});
206