ODK-X Custom Datepicker Template

custom_date_picker.handlebars

<div id="container-{{promptId}}">
    <form action="javascript:void(0);" onsubmit="odkLeaveField(this);">
        <div class="form-group">
            <div class="container">
                <label for="picker-{{promptId}}">{{> labelHint}}</label>
                <br />
                <input id="picker-{{promptId}}" type="date" name="{{name}}" value="{{value}}" tabindex="0"
                    style="background-color:#ffffff" {{#eachProperty inputAttributes}} {{property}}="{{value}}"
                    {{/eachProperty}} {{#if disabled}} style="background-color:lightgray;" disabled="true" {{/if}}>
                <button id="picker-{{promptId}}-button">Today</button>
            </div>
        </div>
    </form>
</div>

<script>
    document.getElementById("picker-{{promptId}}-button").addEventListener('click', function () {
        const formattedLocalDate = formatDateForInput()
        document.getElementById("picker-{{promptId}}").value = formattedLocalDate;
    })

    // take a given date (default local datetime) and format as YYYY-MM-DD
    // (pad leading 0s for day and month where necessary)
    function formatDateForInput(d = new Date()) {
        return d.getFullYear() + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate())
        function pad(n) {
            return n < 10 ? '0' + n : n
        }
    }
</script>