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