Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ODK-X Custom Datepicker Template
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment