<label for="initial">
Default
</label>
<dso-date-picker identifier="initial"></dso-date-picker>
<label for="disabled">
Disabled
</label>
<dso-date-picker identifier="disabled" disabled></dso-date-picker>
<label for="showButton">
Toon kalender knop
</label>
<dso-date-picker identifier="showButton"></dso-date-picker>
<br><button type="button" class="dso-secondary btn-sm" id="showButton-show-button">Open date picker met script</button>
<script>
const button = document.getElementById('showButton-show-button');
button.addEventListener('click', function() {
document.querySelector('dso-date-picker[identifier="showButton"]').show();
});
</script>
<label for="predefinedValue">
Vooringevulde datum
</label>
<dso-date-picker identifier="predefinedValue" value="15-11-2020"></dso-date-picker>
<label for="min-max">
Minimum en maximum datum
</label>
<dso-date-picker identifier="min-max" min="8-1-2020" max="29-1-2020"></dso-date-picker>
<label for="{{ id }}">
{{ label }}
</label>
<dso-date-picker identifier="{{ id }}" {{ attributes(
[min, 'min', min],
[max, 'max', max],
[disabled, 'disabled'],
[value, 'value', value]
)}}></dso-date-picker>
{% if showButton %}
<br><button type="button" class="dso-secondary btn-sm" id="{{ id }}-show-button">Open date picker met script</button>
<script>
const button = document.getElementById('{{ id }}-show-button');
button.addEventListener('click', function() {
document.querySelector('dso-date-picker[identifier="{{ id }}"]').show();
});
</script>
{% endif %}
label: Default
id: initial
label: Disabled
id: disabled
disabled: true
label: Toon kalender knop
id: showButton
showButton: true
label: Vooringevulde datum
id: predefinedValue
value: 15-11-2020
label: Minimum en maximum datum
id: min-max
min: 8-1-2020
max: 29-1-2020