macro_datepicker.html
1 <#-- -------------- jQuery UI Datepicker --------------
2 # More information for jQuery UI Datepicker usage :
3 # http://docs.jquery.com/UI/Datepicker
4 # http://marcgrabanski.com/code/ui-datepicker/
5 # ---------------- Bootstrap datepicker ------------
6 # http://www.eyecon.ro/bootstrap-datepicker/
7 # ---------------- FlatPicker ------------
8 # NEW : https://flatpickr.js.org/
9
10 TODO: This file should be removed asap and merged width the LUTECE core project + JS files
11
12 -->
13
14 <#-- getDatePicker
15 # Get a simple datepicker
16 # idField The id of the text field
17 # language The locale language
18 #
19 # Implementation example :
20 # <input type="text" name="my_date" id="my_date" />
21 # <@getDatePicker idField="my_date" language=locale.language />
22 #
23 -->
24
25 <#-- ---------------- FlatPicker ------------ -->
26 <#-- New FlatPicker Date picker -->
27 <#macro getDatePickerFlatPicker idField language >
28 <link href="js/flatpickr/flatpickr.min.css" rel="stylesheet">
29 <link href="js/flatpickr/style/themeparisfr.css" rel="stylesheet">
30 <script src="js/flatpickr/flatpickr.min.js"></script>
31 <script src="js/flatpickr/locales/<@getRegional language=language />.js" charset="utf-8"></script>
32 <script type="text/javascript" charset="utf-8">
33 $( function() {
34 $('#${idField}').flatpickr({
35 locale:'<@getRegional language=language />',
36 dateFormat: "d/m/Y",
37 allowInput: true
38 });
39 });
40 </script>
41 </#macro>
42
43 <#-- ---------------- Bootstrap datepicker ------------ -->
44 <#-- Bootstrap Date picker
45 <#macro getDatePickerBootstrap idField language >
46 <link href="js/bootstrap-datepicker/css/bootstrap-datepicker.min.css" crossorigin="anonymous" rel="stylesheet">
47 <script src="js/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
48 <script src="js/bootstrap-datepicker/locales/bootstrap-datepicker.<@getRegional language=language />.min.js" charset="utf-8"></script>
49 <script>
50 $( function(){
51 $('#${idField}').datepicker({ language: '<@getRegional language=language />', autoclose: true });
52 });
53 </script>
54 </#macro>
55 -->
56
57 <#-- getDatePickerBootstrap
58 # Get a simple datepicker
59 # idField The id of the text field
60 # language The locale language
61 #
62 # Implementation example :
63 # <input type="text" name="my_date" id="my_date">
64 # <@getDatePickerBootstrap idField="my_date" language=locale.language />
65 #
66 -->
67 <#macro getDatePickerBootstrap idField language >
68 <link href="js/flatpickr/flatpickr.min.css" rel="stylesheet">
69 <link href="js/flatpickr/style/themeparisfr.css" rel="stylesheet">
70 <script src="js/flatpickr/flatpickr.min.js"></script>
71 <script src="js/flatpickr/locales/<@getRegional language=language />.js" charset="utf-8"></script>
72 <script type="text/javascript" charset="utf-8">
73 $( function() {
74 $('#${idField}').flatpickr({
75 locale:'<@getRegional language=language />',
76 dateFormat: "d/m/Y",
77 allowInput: true
78 });
79 });
80 </script>
81 </#macro>
82
83 <#macro getDatePickerBootstrapClass idForm language >
84 <link href="js/bootstrap-datepicker/css/bootstrap-datepicker.min.css" crossorigin="anonymous" rel="stylesheet">
85 <script src="js/bootstrap-datepicker/css/bootstrap-datepicker.min.js"></script>
86 <script src="js/bootstrap-datepicker/js/locales/bootstrap-datepicker.<@getRegional language=language />.min.js" charset="utf-8"></script>
87 <script type="text/javascript" charset="utf-8">
88 $( function() {
89 $("#${idForm} .dtBootstrap").datepicker({language: '<@getRegional language=language />', autoclose: true});
90 });
91 </script>
92 </#macro>
93
94 <#-- Bootstrap Date range picker -->
95 <#macro getDatePickerRangeBootstrap language >
96 <link href="js/bootstrap-datepicker/css/bootstrap-datepicker.min.css" crossorigin="anonymous" rel="stylesheet">
97 <script src="js/bootstrap-datepicker/css/bootstrap-datepicker.min.js"></script>
98 <script src="js/bootstrap-datepicker/js/locales/bootstrap-datepicker.<@getRegional language=language />.min.js" charset="utf-8"></script>
99 <script type="text/javascript" charset="utf-8">
100 $( function() {
101 <#-- The range must be defined with a <div class="input-daterange">..</div> englobing 2 input fields as shown beside.
102 Example:
103 <div class="input-daterange">
104 <div class="col-xs-12 col-sm-4">
105 <input type="text" name="date_begin" id="date_begin" value="" class="form-control">
106 </div>
107 <div class="col-xs-12 col-sm-4">
108 <strong>#i18n{labelDateEnd}</strong>
109 </div>
110 <div class="col-xs-12 col-sm-4">
111 <input type="text" name="date_end" id="date_end" value="" class="form-control">
112 </div>
113 </div>
114 -->
115 $('.input-daterange').datepicker({language: "<@getRegional language=language />", autoclose: true});
116 });
117 </script>
118 </#macro>
119
120 <#-- Deprecated -->
121 <#-- -------------- jQuery UI Datepicker -------------- -->
122 <#macro getDatePicker idField language >
123 <script src="js/jquery/plugins/ui/jquery-ui.min.js"></script>
124 <script src="js/jquery/plugins/ui/ui.datepicker-fr.js"></script>
125 <script type="text/javascript" charset="utf-8">
126 $( function(){
127 $('#${idField}').datepicker({language: '<@getRegional language=language />'});
128 });
129 </script>
130 </#macro>
131
132 <#-- getDatePickerRange
133 # Get a datepicker range
134 # idFieldFrom The id of the 'from' text field
135 # idFieldTo The id of the 'to' text field
136 # language The locale language
137 #
138 # Implementation example :
139 # <input type="text" name="document_validity_begin" id="document_validity_begin" size="10" />
140 # <input type="text" name="document_validity_end" id="document_validity_end" size="10" />
141 # <@getDatePickerRange idFieldFrom="document_validity_begin" idFieldTo="document_validity_end" language=locale.language />
142 #
143 -->
144
145 <#macro getDatePickerRange idFieldFrom idFieldTo language >
146 <script src="js/jquery/plugins/ui/jquery-ui.min.js"></script>
147 <script src="js/jquery/plugins/ui/ui.datepicker-fr.js"></script>
148 <script type="text/javascript" charset="utf-8">
149 $(document).ready(function() {
150 <#-- <@setDefaultsDatePicker /> -->
151 $('#${idFieldFrom}').datepicker();
152 $('#${idFieldTo}').datepicker({beforeShow: customRange}, $.extend({showStatus: true}));
153 // Customize two date pickers to work as a date range
154 function customRange(input) {
155 $.datepicker.setDefaults($.datepicker.regional['<@getRegional language=language />']);
156 return {minDate: (input.id == '${idFieldTo}' ? $('#${idFieldFrom}').datepicker('getDate') : null),
157 maxDate: (input.id == '${idFieldFrom}' ? $('#${idFieldTo}').datepicker('getDate') : null)};
158 }
159 $('.${idFieldFrom}').datepicker({language: '<@getRegional language=language />'});
160 });
161 </script>
162 </#macro>
163
164 <#-- ------------ Privates macro --------------- -->
165
166 <#-- setDefaultsDatePicker
167 # This macro should not be called directly
168 #
169 -->
170 <#macro setDefaultsDatePicker >
171 $.datepicker.setDefaults({showOn: 'button', buttonImageOnly: true,
172 buttonImage: 'js/jquery/plugins/ui/datepicker/calendar.png', buttonText: 'Calendar',
173 showAnim: 'slideDown', speed: 'fast'});
174 </#macro>
175
176 <#-- getRegional
177 # This macro should not be called directly
178 #
179 -->
180 <#macro getRegional language><#if !('${language}'=='en')>${language}</#if></#macro>
181 <#-- -------------- jQuery UI Datepicker --------------
182 # More information for jQuery UI Datepicker usage :
183 # http://docs.jquery.com/UI/Datepicker
184 # http://marcgrabanski.com/code/ui-datepicker/
185 -->
186
187 <#-- getDatePicker
188 # Get a simple datepicker
189 # idField The id of the text field
190 # language The locale language
191 #
192 # Implementation example :
193 # <input type="text" name="my_date" id="my_date" />
194 # <@getDatePicker idField="my_date" language=locale.language />
195 #
196 -->
197 <#-- getDatePickerRange
198 # Get a datepicker range
199 # idFieldFrom The id of the 'from' text field
200 # idFieldTo The id of the 'to' text field
201 # language The locale language
202 #
203 # Implementation example :
204 # <input type="text" name="document_validity_begin" id="document_validity_begin" size="10" />
205 # <input type="text" name="document_validity_end" id="document_validity_end" size="10" />
206 # <@getDatePickerRange idFieldFrom="document_validity_begin" idFieldTo="document_validity_end" language=locale.language />
207 #
208 -->