Date Picker

<!-- 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 %}