https://my.autosmartja.com/static/dropdown-datepicker/dropdown-datepicker.js

1(function (scope) {
2
3    var $container = $('.select-date-picker');
4    // var $dateField = $container.find('#date-field');
5    var $month = $container.find('[name*=dp_month]');
6    var $day = $container.find('[name*=dp_day]');
7    var $year = $container.find('[name*=dp_year]');
8
9    function showError($element, msg) {
10        $element.show();
11        $element.text(msg);
12    }
13
14    function removeError($element) {
15        $element.hide();
16        $element.text('');
17    }
18    function isDigit(val) {
19       return val.match(/[0-9]+$/)
20    }
21
22    function validateDay(val, options=null) {
23        var error = null
24        var isValid = true;
25        var value = parseInt(val);
26        var isInt = !isNaN(value);
27
28        if (val) {
29            if (val.length > 2 || !isInt || (isInt && value > 31) || (isInt && value < 1) || !isDigit(val)) {
30                error = 'Invalid Day';
31                isValid = false
32            }
33        }
34        
35        return {
36            valid: isValid,
37            reason: error
38        }
39    }
40
41    function validateMonth(val, options=null) {
42        var error = null
43        var isValid = true;
44        var value = parseInt(val);
45        var isInt = !isNaN(value);
46
47        if (val) {   
48            if (val.length > 2 || !isInt || (isInt && value > 12) || (isInt && value < 1) ) {
49                error = 'Invalid Month';
50                isValid = false;
51            }
52        }
53
54        return {
55            valid: isValid,
56            reason: error
57        }
58    }
59
60    function validateYear(val, options=null) {
61        var error = null
62        var isValid = true;
63        var value = parseInt(val);
64        var isInt = !isNaN(value);
65        var currentYear = new Date().getFullYear();
66        
67        if (val) {   
68            // if the user enters a year that is more or less than 100 years 
69            // into the future then the date is considered invali

69d
70            if (val.length > 4 || !isInt || 
71                (isInt && value > (currentYear + 100)) || 
72                (isInt && value < (currentYear - 120)) || 
73                !isDigit(val)) {
74                error = 'Invalid Year';
75                isValid = false;
76            } 
77        }
78        
79        return {
80            valid: isValid,
81            reason: error
82        }
83    }
84
85    function handleDateChange(event){
86        var $context = $(event.target);
87        var $parentContext = $context.closest('.select-date-picker');
88        var $dateField = $parentContext.find('.date-field');
89        var month = $parentContext.find('[name*=dp_month]').val(); //$month.val();
90        var day = $parentContext.find('[name*=dp_day]').val();
91        var year = $parentContext.find('[name*=dp_year]').val();
92        var formattedDate = day + '/' + month + '/' + year;
93
94        var dayValidator = validateDay(day);
95        var monthValidator = validateMonth(month);
96        var yearValidator = validateYear(year);
97        
98        if (dayValidator.valid && monthValidator.valid && yearValidator.valid) {
99            
100            removeError($parentContext.find('.dp-day.form-error'));
101            removeError($parentContext.find('.dp-month.form-error'));
102            removeError($parentContext.find('.dp-year.form-error'));
103
104            $dateField.val(formattedDate);
105        } else {
106
107            if (!dayValidator.valid) {
108                showError($parentContext.find('.dp-day.form-error'), dayValidator.reason);
109            } else {
110                removeError($parentContext.find('.dp-day.form-error'));
111            }
112
113            if (!monthValidator.valid) {
114                showError($parentContext.find('.dp-month.form-error'), monthValidator.reason);
115            } else {
116                removeError($parentContext.find('.dp-month.form-error'));
117            }
118
119            if (!yearValidator.valid) {
120                showError($parentContext.find('.dp-year.form-error'), yearValidator.reason);
121            } else {
122                removeError($parentContext.find('.dp-year.form-error'));
123            }
124        }
125    }
126
127    function parseDateForPicker() {
128        var $dateFields = $('.dropdown-datepicker-input');
129        $dateFields.each(function () {
130            const $dateInput = $(this);
131            const $parentContext = $dateInput.closest('.select-date-picker');
132            const $monthSelect = $parentContext.find('[name*=dp_month]');
133            const $dayInput = $parentContext.find('[name*=dp_day]');
134            const $yearInput = $parentContext.find('[name*=dp_year]');
135            const dateValue = $dateInput.val();
136
137            if (dateValue) {
138                const dateValueParts = dateValue.split('/');
139                try {
140                    $dayInput.val(dateValueParts[0]);
141                    $monthSelect.val(dateValueParts[1]);
142                    $yearInput.val(dateValueParts[2]);
143                } catch (e) {
144                    console.error("error parsing date");   
145                }
146            }
147        });
148
149        CustomSelect.refresh();
150    }
151
152    function init() {
153        
154        $month.change(handleDateChange);
155        $day.on('input', handleDateChange);
156        $year.on('input', handleDateChange);
157
158        // 
159        $("form").submit(function() {
160            $(this)
161            .find('.select-date-picker')
162            .find('select[name*=dp_month], input[name*=dp_day], input[name*=dp_year]')
163            .attr('disabled', true);
164         });
165        parseDateForPicker();
166    }
167
168    init();
169
170})(window);