Examples on how to do date ranges and handle validation

[arielsalminen]

N/A

[hmaesta]

Since there is no examples yet, any tips on how to start? Really struggling here to find a Vue date-picker with range option that has less then 300 KB 😣

[WickyNilliams]

Something like this should work:

<label for="startDate">Start date:</label>
<duet-date-picker class="start" identifier="startDate"></duet-date-picker>

<label for="endDate">End date:</label>
<duet-date-picker class="end" identifier="endDate"></duet-date-picker>

<script>
  var startPicker = document.querySelector(".start")
  var endPicker = document.querySelector(".end")
  var startDate, endDate

  // Handle date selection
  function handleDateSelect() {
    if (startDate && endDate) {
      console.log("date range selected!", startDate, endDate)
    }
  }

  // When the start date picker is changed, set end date's min to equal date
  startPicker.addEventListener("duetChange", function(e) {
    startDate = e.detail.valueAsDate
    endPicker.min = e.detail.value

    if (!endDate) {
      endPicker.show()
    }

    handleDateSelect()
  })

  // When the end date picker is changed, set start date's max to equal date
  endPicker.addEventListener("duetChange", function(e) {
    endDate = e.detail.valueAsDate
    startPicker.max = e.detail.value
    handleDateSelect()
  })
</script>

Not sure we'll ever support ranges with some dedicated component, but hopefully this will satisfy your needs for now!

[hmaesta]

Oh, I get the ideia now: two inputs. I has trying to achieve with just one – like Litepicker.

Thank you for your help, @WickyNilliams.