{% set id = id ~ '-date' -%}
{% set name = name is defined ? name -%}
{% set value = value is defined ? value -%}

<div class="datewrapper">
    {%- include "_includes/forms/text" with {
        name: (name ? name~'[date]'),
        autocomplete: false,
        size: 10,
        value: (value ? value|date('short') : '')
    } -%}
    {% 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|date('Y') }}, {{ value|date('n')-1 }}, {{ value|date('j') }}{% endif %})
    }, Craft.datepickerOptions));
{%- endjs %}