https://www.mcd.om/cdn/js/datepickerProperties.js?v=RHZs8ZLBG0AUiDgRlzxAIKU6XUoF5SiQFv3EsluUn_Y

1//Created by Muayad
2
3//Methods can be used:
4//InitializeDatePicker(id) normal date picker
5//InitializeDatePickerFromTomorrow(id) date picker accept date from tomorrow's only
6//InitializeDatePickerUpToToday(id) date picker accept date up to today only
7//isDateValid(className) check if date is valid
8//RemoveErrorMessage(id) remove error message if date is valid
9//CompareFromToDate(fromDate, toDate) let from date value more than to date value always
10
11function InitializeDatePicker(id) {
12    $("#" + id).inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' }); //Input Mask
13    $("#" + id).attr('spellcheck', false);
14
15    //Date picker
16    $("#" + id).datepicker({
17        uiLibrary: 'bootstrap',
18        iconsLibrary: 'fontawesome',
19        format: 'dd/mm/yyyy',
20        showOnFocus: false,
21        keyboardNavigation: true,
22        size: 'default',
23        change: function () {
24            RemoveErrorMessage(id);
25        },
26    });
27}
28function InitializeDatePickerFromTomorrow(id) {
29    $("#" + id).inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' }); //Input Mask
30    $("#" + id).attr('spellcheck', false);
31
32    dateFromTomorrow("#" + id);
33
34    //Date picker
35    $("#" + id).datepicker({
36        uiLibrary: 'bootstrap',
37        iconsLibrary: 'fontawesome',
38        format: 'dd/mm/yyyy',
39        showOnFocus: false,
40        keyboardNavigation: true,
41        size: 'default',
42        change: function () {
43            RemoveErrorMessage(id);
44        },
45        minDate: function () {
46            var date = new Date();
47            date.setDate(date.getDate() + 1);
48            return new Date(date.getFullYear(), date.getMonth(), date.getDate());
49        }
50    });
51}
52function InitializeDatePickerUpToToday(id) {
53    $("#" + id).inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' }); //Input Mask
54    $("#" + id).attr('spellcheck', false);
55
56    dateUpToToday("#" + id);
57
58    //Date picker
59    $("#" + id).datepicker({
60        uiLibrary: 'bootstrap',
61        iconsLibrary: 'fontawesome',
62        format: 'dd/mm/yyyy',
63        showOnFocus: false,
64        keyboardNavigation: true,
65        size: 'default',
66        change: function () {
67            RemoveErrorMessage(id);
68        },
69        maxDate: function () {
70            var date = new Date();
71            date.setDate(date.getDate());
72            return new Date(date.getFullYear(), date.getMonth(), date.getDate());
73        }
74    });
75}
76
77//Validate date
78function isDateValid(className) {
79    if ($(className).val() == null)
80        return false;
81
82    var date = $(className).val().split("/");
83    if (!isNaN(date[0]) && !isNaN(date[1]) && !isNaN(date[2]))
84        return true;
85    return false;
86}
87
88function RemoveErrorMessage(id) {
89    if ($("span.text-danger." + id).length) {
90        if (!($("#" + id).val().trim() == "dd/mm/yyyy" || $("#" + id).val().trim() == "") && isDateValid("#" + id)) {
91            $("span.text-danger." + id).text('');
92        }
93    }
94}
95
96//Compare from date and to date (from date will be less than to date)
97function CompareFromToDate(fromDate, toDate) {
98    $(fromDate).on("blur", function () {
99        ValidateFromDate(fromDate, toDate);
100    });
101    $(fromDate).on("input", function () {
102        ValidateFromDate(fromDate, toDate);
103    });
104    $(fromDate).on("change", function () {
105        ValidateFromDate(fromDate, toDate);
106    });
107    $(toDate).on("blur", function () {
108        ValidateToDate(toDate, fromDate);
109    });
110    $(toDate).on("input", function () {
111        ValidateToDate(toDate, fromDate);
112    });
113    $(toDate).on("change", function () {
114        ValidateToDate(toDate, fromDate);
115    });
116}
117function ValidateFromDate(class1, class2) {
118    var FromDateFull = $(class1).val();
119    var ToDateFull = $(class2).val();
120    var fromDate = $(class1).val().split("/");
121    var toDate = $(class2).val().split("/");
122    if (!isNaN(fromDate[0]) && !isNaN(fromDate[1]) && !isNaN(fromDate[2]) && FromDateFull.length == 10 && !isNaN(toDate[0]) && !isNaN(toDate[1]) && !isNaN(toDate[2]) && ToDateFull.length == 10) {
123        if (toDate[2] < fromDate[2]) {
124            $(class1).val((toDate[0] - 1) + "/" + toDate[1] + "/" + toDate[2]);
125        }
126        else if (toDate[2] == fromDate[2]) {
127            if (toDate[1] < fromDate[1]) {
128                $(class1).val((toDate[0] - 1) + "/" + toDate[1] + "/" + toDate[2]);
129            }
130            else if (toDate[1] == fromDate[1]) {
131                if (toDate[0] <= fromDate[0]) {
132                    $(class1).val((toDate[0] - 1) + "/" + toDate[1] + "/" + toDate[2]);
133                }
134            }
135        }
136    }
137}
138function ValidateToDate(class2, class1) {
139    var FromDateFull = $(class1).val();
140    var ToDateFull = $(class2).val();
141    var fromDate = $(class1).val().split("/");
142    var toDate = $(class2).val().split("/");
143    if (!isNaN(toDate[0]) && !isNaN(toDate[1]) && !isNaN(toDate[2]) && ToDateFull.length == 10 && !isNaN(fromDate[0]) && !isNaN(fromDate[1]) && !isNaN(fromDate[2]) && FromDateFull.length == 10) {
144        if (fromDate[2] > toDate[2]) {
145            $(class2).val((parseInt(fromDate[0]) + 1) + "/" + fromDate[1] + "/" + fromDate[2]);
146        }
147        else if (fromDate[2] == toDate[2]) {
148            if (fromDate[1] > toDate[1]) {
149                $(class2).val((parseInt(fromDate[0]) + 1) + "/" + fromDate[1] + "/" + fromDate[2]);
150            }
151            else if (fromDate[1] == toDate[1]) {
152                if (fromDate[0] >= toDate[0]) {
153                    $(class2).val((parseInt(fromDate[0]) + 1) + "/" + fromDate[1] + "/" + fromDate[2]);
154                }
155            }
156        }
157    }
158}
159
160//Date from tomorrow
161function dateFromTomorrow(date) {
162    $(date).on("blur", function () {
163        ValidateAndChangeDate(date, this);
164    });

165
166    $(date).on("input", function () {
167        ValidateAndChangeDate(date, this);
168    });
169}
170function ValidateAndChangeDate(id, context) {
171    var FullDate = $(context).val();
172    var context = $(context).val().split("/");
173    var date = new Date();
174    var day = (date.getDate() + 1);
175    if (day.toString().length == 1)
176        day = '0' + day;
177    if (!isNaN(context[0]) && !isNaN(context[1]) && !isNaN(context[2]) && FullDate.length == 10) {
178        if (context[2] < date.getFullYear()) {
179            $(id).val(day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
180        }
181        else if (context[2] == date.getFullYear()) {
182            if (context[1] < (date.getMonth() + 1)) {
183                $(id).val(day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
184            }
185            else if (context[1] == (date.getMonth() + 1)) {
186                if (context[0] < day) {
187                    $(id).val(day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
188                }
189            }
190        }
191    }
192}
193
194//Date up to today
195function dateUpToToday(date) {
196    $(date).on("blur", function () {
197        ChangeAndValidateDate(date, this);
198    });
199
200    $(date).on("input", function () {
201        ChangeAndValidateDate(date, this);
202    });
203}
204function ChangeAndValidateDate(id, context) {
205    var FullDate = $(context).val();
206    var context = $(context).val().split("/");
207    var date = new Date();
208    var day = (date.getDate());
209    if (day.toString().length == 1)
210        day = '0' + day;
211    if (!isNaN(context[0]) && !isNaN(context[1]) && !isNaN(context[2]) && FullDate.length == 10) {
212        if (context[2] > date.getFullYear()) {
213            $(id).val(day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
214        }
215        else if (context[2] == date.getFullYear()) {
216            if (context[1] > (date.getMonth() + 1)) {
217                $(id).val(day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
218            }
219            else if (context[1] == (date.getMonth() + 1)) {
220                if (context[0] > day) {
221                    $(id).val(day + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
222                }
223            }
224        }
225    }
226}