{% set id = (id ?? 'date'~random())~'-date' -%}
{% set name = name ?? null -%}
{% set value = (value ?? false) ? date(value, false) : null -%}

<div class="datewrapper"
        {%- if block('attr') is defined %} {{ block('attr') }}{% endif %}>
    {%- include "_includes/forms/text" with {
        name: (name ? name~'[date]'),
        autocomplete: false,
        size: 10,
        placeholder: ' ',
        value: (value ? value|date('short') : '')
    } -%}
    <div data-icon="date"></div>
    {% if name -%}
        <input type="hidden" name="{{ name }}[timezone]" value="{{ craft.app.getTimeZone() }}">
    {%- endif -%}
</div>

{%- js %}
    $('#{{ id|namespaceInputId|e('js') }}').datepicker($.extend({
        defaultDate: new Date({% if value %}{{ value.format('Y') }}, {{ value.format('n')-1 }}, {{ value.format('j') }}{% endif %})
    }, Craft.datepickerOptions));
{%- endjs %}
