{% set hasOuterContainer = hasOuterContainer ?? false %} {% set id = (id ?? "time#{random()}") ~ '-time' -%} {% set name = name ?? null -%} {% set value = value ?? null -%} {% set timeZone = timeZone ?? null %} {% set outputTzParam = outputTzParam ?? true %} {% set isMobile = craft.app.request.isMobileBrowser %} {% set isDateTime = isDateTime ?? false %} {% do view.registerAssetBundle('craft\\web\\assets\\timepicker\\TimepickerAsset') -%} {% set containerAttributes = { class: ['timewrapper']|merge((class ?? [])|explodeClass), }|merge(containerAttributes ?? [], recursive=true) %} {%- if block('attr') is defined %} {%- set containerAttributes = containerAttributes|merge(('
')|parseAttr, recursive=true) %} {% endif %} {% if not hasOuterContainer %}
{% endif %} {% tag 'div' with containerAttributes %} {%- include "_includes/forms/text" with { type: isMobile ? 'time' : 'text', class: isMobile and not value ? 'empty-value' : false, name: name ? "#{name}[time]" : null, autocomplete: false, size: 10, placeholder: ' ', value: value ? value|time(isMobile ? 'H:i' : 'short', timeZone) : '', inputAttributes: { aria: { label: isDateTime ? 'Time'|t('app') : false, }, }, } -%}
{%- if name and outputTzParam -%} {{- hiddenInput("#{name}[timezone]", craft.app.getTimeZone()) -}} {%- endif -%} {% endtag -%} {% if not hasOuterContainer %}
{% endif %} {%- if not isMobile -%} {% set options = { minTime: minTime ?? null, maxTime: maxTime ?? null, disableTimeRanges: disableTimeRanges ?? null, step: minuteIncrement ?? null, forceRoundTime: forceRoundTime ?? false, }|filter %} {#- include JSON_FORCE_OBJECT in the json_encode options -#} {%- set jsonOptions = constant('JSON_HEX_TAG') b-or constant('JSON_HEX_AMP') b-or constant('JSON_HEX_QUOT') b-or constant('JSON_FORCE_OBJECT') -%} {%- js -%} var $timePicker = $('#{{ id|namespaceInputId|e('js') }}'); $timePicker.timepicker($.extend({{ options|json_encode(jsonOptions)|raw }}, Craft.timepickerOptions)); {%- if value and value.format is defined -%} $timePicker.timepicker('setTime', {{ value.format('G') }}*3600 + {{ value.format('i') }}*60 + {{ value.format('s') }}); {%- endif -%} {%- endjs -%} {%- endif -%}