Date Picker

Component preview opent in nieuw tabblad

There are no notes for this item.







<!-- Default -->
<label for="initial">
    Default
</label>
<dso-date-picker identifier="initial"></dso-date-picker>
<!-- Disabled -->
<label for="disabled">
    Disabled
</label>
<dso-date-picker identifier="disabled" disabled></dso-date-picker>
<!-- Showbutton -->
<label for="showButton">
    Toon kalender knop
</label>
<dso-date-picker identifier="showButton"></dso-date-picker>

<br><button type="button" class="btn btn-default 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>
<!-- Predefined Value -->
<label for="predefinedValue">
    Vooringevulde datum
</label>
<dso-date-picker identifier="predefinedValue" value="15-11-2020"></dso-date-picker>
<!-- Min Max -->
<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="btn btn-default 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 %}
/* Default */
label: Default
id: initial
/* Disabled */
label: Disabled
id: disabled
disabled: true
/* Showbutton */
label: Toon kalender knop
id: showButton
showButton: true
/* Predefined Value */
label: Vooringevulde datum
id: predefinedValue
value: 15-11-2020
/* Min Max */
label: Minimum en maximum datum
id: min-max
min: 8-1-2020
max: 29-1-2020