input.ftl
1 <#--
2 Macro: input
3 Description: Generates an input element for various types of form fields, including text, textarea, password, email, file, number, color, range, tel, and datalist. It also supports various attributes such as size, maxlength, placeholder, disabled, readonly, pattern, title, min, max, and mandatory. Additionally, it can generate date and time pickers using the `getDate`, `getDateTime`, `getTime`, `getDateRange`, and `getDateTimeRange` macros.
4 Parameters:
5 - name (string): the name of the input field.
6 - id (string, optional): the ID of the input field.
7 - type (string, optional): the type of the input field. Default is `text`.
8 - value (string, optional): the default value of the input field.
9 - class (string, optional): the CSS class of the input field.
10 - size (string, optional): the size of the input field.
11 - inputSize (int, optional): the size of the input field for some input types.
12 - maxlength (int, optional): the maximum length of the input field.
13 - placeHolder (string, optional): the placeholder text of the input field.
14 - rows (int, optional): the number of rows for a textarea input.
15 - cols (int, optional): the number of columns for a textarea input.
16 - richtext (boolean, optional): whether to use a rich text editor for a textarea input.
17 - tabIndex (int, optional): the tab index of the input field.
18 - disabled (boolean, optional): whether the input field is disabled.
19 - readonly (boolean, optional): whether the input field is readonly.
20 - pattern (string, optional): the regex pattern for the input field.
21 - title (string, optional): the title text of the input field.
22 - min (int, optional): the minimum value of the input field.
23 - max (int, optional): the maximum value of the input field.
24 - params (string, optional): additional parameters for the input field.
25 - mandatory (boolean, optional): whether the input field is required.
26 - language (string, optional): the language code for date and time pickers.
27 - minDate (string, optional): the minimum date for date and datetime pickers.
28 - maxDate (string, optional): the maximum date for date and datetime pickers.
29 - defaultDate (string, optional): the default date for date and datetime pickers.
30 - defaultTime (string, optional): the default time for datetime pickers.
31 - time_24hr (boolean, optional): whether to use a 24-hour clock for time pickers.
32 - minTime (string, optional): the minimum time for time and datetime pickers.
33 - maxTime (string, optional): the maximum time for time and datetime pickers.
34 - format (string, optional): the format for date and time pickers.
35 - showFormat (string, optional): the display format for date and time pickers.
36 - dateRangeEndId (string, optional): the ID of the end date field for date range and datetime range pickers.
37 - dateParams (list, optional): additional parameters for date and time pickers.
38 - showFileUrl (boolean, optional): whether to show a link to the uploaded file for file inputs.
39 - fileURL (string, optional): the URL of the uploaded file for file inputs.
40 - fileName (string, optional): the name of the uploaded file for file inputs.
41 - datalist (string, optional): the comma-separated list of options for a datalist input.
42 - accept (string, optional): the comma-separated list of options for a datalist input.
43 -->
44 <#macro input name id='' type='text' value='' class='' size='' inputSize=0 maxlength=0 placeHolder='' autoComplete='' rows=4 cols=40 richtext=false tabIndex='' disabled=false readonly=false pattern='' title='' min=0 max=0 mandatory=false language=.locale minDate='' maxDate='' defaultDate='' defaultTime='' time_24hr=true minTime='' maxTime='' format='' showFormat='' dateRangeEndId='' dateParams=[] showFileUrl=false fileURL='' fileName='' datalist='' accept='' params='' deprecated...>
45 <@deprecatedWarning args=deprecated />
46 <#if propagateMandatory?? && propagateMandatory ><#local mandatory = true /></#if>
47 <#if type='textarea'>
48 <textarea name="${name}" class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if><#if richtext> richtext</#if>" rows="${rows}" cols="${cols}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if (mandatory && !richtext)> required</#if><#if labelFor?? && labelFor!='' && helpKey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if>><#if value!='' >${value}<#else><#nested></#if></textarea>
49 <#elseif type='text' || type='search' || type='password' || type='email' || type='file' || type='number' || type='color' || type='url' || type='range' || type='tel' || type='url' || type='datalist' || type='dateHTML5'>
50 <input class="form-control<#if size!=''> input-${size}</#if><#if type='color'> input-color</#if><#if class!=''> ${class}</#if>" type="<#if type='dateHTML5'>date<#else>${type}</#if>" name="${name}" value="${value}"<#if autoComplete !=''> autocomplete="${autoComplete}"</#if><#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if maxlength > 0> maxlength="${maxlength}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if accept!='' && type='file'>accept=${accept}</#if><#if min!=max> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required </#if><#if labelFor?? && labelFor!='' && helpkey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if><#if type='datalist'> list="${name}_list"</#if>>
51 <#if type='file'>
52 <input type="hidden" id=${id}Key name="${name}Key" value="${value}" />
53 <#if showFileUrl && fileURL?? && fileName??><@link href="${fileURL}">${fileName}</@link></#if>
54 </#if>
55 <#if type='datalist'>
56 <#if id !='' && datalist !='' >
57 <datalist id="${name}_list">
58 <#assign options = datalist?split(',')>
59 <#list options as opt><option value="${opt!}"></#list>
60 </datalist>
61 <#else>
62 <!-- Missing id or params attribute for macro @input for type "datalist" -->
63 </#if>
64 </#if>
65 <#elseif type='date' || type='datetime' || type='daterange' || type='datetimerange' || type='time'>
66 <input class="form-control<#if size!=''> input-${size}</#if><#if class!=''> ${class}</#if>" type="text" name="${name}" value="${value}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if maxlength > 0> maxlength="${maxlength}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if pattern!=''>pattern=${pattern}</#if><#if min!=max> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required </#if><#if labelFor?? && labelFor!='' && helpkey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if> />
67 <#if type='date'>
68 <#if value?has_content>
69 <#local defaultDate=value />
70 </#if>
71 <@getDate idField='${id}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate dateOptions=dateParams />
72 <#elseif type='datetime'>
73 <#if value?has_content>
74 <#local defaultDate=value />
75 </#if>
76 <@getDateTime idField='${id}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate defaultTime=defaultTime minTime=minTime maxTime=maxTime dateOptions=dateParams />
77 <#elseif type='daterange'>
78 <#if dateRangeEndId != ''>
79 <#if value?has_content>
80 <#local defaultDate=value />
81 </#if>
82 <@getDateRange idField='${id}' idEndField='${dateRangeEndId}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate dateOptions=dateParams />
83 <#else>
84 <@alert class='danger'>${i18n("portal.util.datepicker.rangeEndId.mandatory")}</@alert>
85 </#if>
86 <#elseif type='datetimerange'>
87 <#if dateRangeEndId != ''>
88 <#if value?has_content>
89 <#local defaultDate=value />
90 </#if>
91 <@getDateTimeRange idField='${id}' idEndField='${dateRangeEndId}' language=language format=format showFormat=showFormat minDate=minDate maxDate=maxDate defaultDate=defaultDate defaultTime=defaultTime minTime=minTime maxTime=maxTime dateOptions=dateParams />
92 <#else>
93 <@alert class='danger'>${i18n("portal.util.datepicker.rangeEndId.mandatory")}</@alert>
94 </#if>
95 <#elseif type='time'>
96 <#if value?has_content>
97 <#local defaultDate=value />
98 </#if>
99 <@getTime idField='${id}' language=language format='H:i' showFormat='H:i' minTime=minTime maxTime=maxTime time_24hr=time_24hr defaultDate=defaultDate dateOptions=dateParams />
100 </#if>
101 <#if id=''><@alert class='danger'>${i18n("portal.util.datepicker.id.mandatory")}</@alert></#if>
102 <#elseif type='html5date' || type='html5datetime' || type='html5time' || type='html5month'>
103 <input class="form-control<#if size!=''> input-${size}</#if><#if type='color'> input-color</#if><#if class!=''> ${class}</#if>" type="<#if type='html5date'>date<#elseif type='html5datetime'>datetime-local<#elseif type='html5time'>time<#elseif type='html5month'>month<#else>unsupported date type</#if>" name="${name}" value="${value}"<#if tabIndex!=''> tabindex="${tabIndex}"</#if><#if placeHolder!=''> placeholder="${placeHolder}"</#if><#if title!=''> title="${title}"</#if><#if inputSize!=0> size="${inputSize}"</#if><#if disabled> disabled</#if><#if readonly> readonly</#if><#if id!=''> id="${id}"</#if><#if params!=''> ${params}</#if><#if min!=max> min="${min}"</#if><#if max!=0> max="${max}"</#if><#if mandatory> required </#if><#if labelFor?? && labelFor!='' && helpkey?? && helpKey!=''> aria-describedby="${labelFor}_help"</#if>>
104 <#elseif type='hidden'>
105 <input type="hidden" name="${name}" <#if id!=''>id="${id}"</#if> value="${value}" />
106 <#else>
107 <@alert class='danger'>${i18n("portal.util.message.unsupportedType")}</@alert>
108 </#if>
109 </#macro>