[%- dw.need_res( { group => "foundation" },
    "js/vendor/pickadate.js/picker.js"
    "js/vendor/pickadate.js/picker.date.js"
    "js/vendor/pickadate.js/picker.time.js"
    "js/vendor/pickadate.js/legacy.js"
    "stc/css/components/pickadate/datetime.css"
    ); -%]

<div class="row collapse" id="deliverydate">
    <div class="columns medium-6">
        <label for="deliverydate" class="inline">[% dw.ml( '.giftfor.deliverydate') %]</label>
    </div>
    <div class="columns medium-5 small-10">
        [%- form.textbox(
            name = "deliverydate"
            id = "js-deliverydate"

            maxlength = "10"
            size = "10"

            default = date.iso8601.substr(0, 10)

            autocomplete = "off"
        ) -%]
    </div>
    <div class="columns medium-1 small-2">
        [%- INCLUDE "components/icon-button.tt"
                button = {
                    class = "postfix primary"
                    id = "js-deliverydate-button"
                }
                icon = "calendar"
                text = dw.ml('.label.picker.date')
        -%]
    </div>
    <div class="picker-output"></div>
</div>