How do you extract a date from a date range picker?

Community resources General
1

Date range picker is in use among the components of memberstack.
https://app.memberstack.com/apps/app_cll98ntvz007c0t4g0y9q52mr/editor

I would like to draw the period selected by the user as a date through the corresponding component.
(ex. 2023.09.07 ~ 2023.09.09 → 3 days)

How can it be implemented?

read-only link : Webflow - billridge

2

Hey! I’m assuming this is the one you’re using? #63 - Date Range Picker | Webflow Powerups

If so, you can use javascript to calculate the amount of days between the start and end date. Here’s an example of how you can do that (assuming you create an input and add the attribute ms-code-input=“date-range-duration”:

<script>
$(function() {

  $('input[ms-code-input="date-range"]').on('apply.daterangepicker', function(ev, picker) {
    var startDate = picker.startDate;
    var endDate = picker.endDate;
    var duration = endDate.diff(startDate, 'days') + 1; // '+1' to include start and end date in day count
    $('input[ms-code-input="date-range-duration"]').val(duration + ' days');
  });

});
</script>