#63 - Date Range Picker v0.1

Create a date range input in Webflow!

Besoin d'aide avec ce MemberScript ?

Tous les clients de Memberstack peuvent demander de l'aide dans le Slack 2.0. Veuillez noter qu'il ne s'agit pas de fonctionnalités officielles et que le support ne peut être garanti.

Voir la démo


<!-- 💙 MEMBERSCRIPT #62 v0.1 💙 DATE RANGE PICKER -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
  .daterangepicker td.active {
    background-color: #006cfa !important ;
  }
</style>
<script type="text/javascript">
$(function() {

  $('input[ms-code-input="date-range"]').daterangepicker({
      "opens": "center",
      "locale": {
        "format": "MM/DD/YYYY",
        "separator": " - ",
        "applyLabel": "Apply",
        "cancelLabel": "Cancel",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "Custom",
        "weekLabel": "W",
        "daysOfWeek": [
            "Su",
            "Mo",
            "Tu",
            "We",
            "Th",
            "Fr",
            "Sa"
        ],
        "monthNames": [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July",
            "August",
            "September",
            "October",
            "November",
            "December"
        ],
    },
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});
</script>

Description

Attribut

Aucun élément n'a été trouvé.

Création du scénario Make.com

1. Téléchargez le modèle JSON ci-dessous pour commencer.

Télécharger le fichier

2. Naviguez jusqu'à Make.com et créez un nouveau scénario...

3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...

4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.

How to Add a Date Range Selector to your Webflow Form

Memberscripts needed:

https://www.memberstack.com/scripts/63-date-range-picker

Tutorial:

https://www.loom.com/share/a4d523a5cd514351bf0cc15d768b21e1?sid=b73a85cb-6530-45b9-9c24-a99a3585185e

Cloneable:

https://webflow.com/made-in-webflow/website/date-range-picker-dbe033

Why/When Would You Need to Add a Date Range Selector to your Webflow Form?

Provide users with a date range selector for booking flights, rooms, setting up appointments, or anything else that requires them to specify a date range.

Depending on the type of business you’re running and what you’re selling, you may need users to provide you with a date range.

Whether it’s for booking flights, rooms, setting up appointments or anything else, we’re going to look at how to add a date range selector to your Webflow form.

Adding a date range selector to Webflow forms

To add a price range selector to a Webflow form, we’re going to use MemberScript #63 – Date Range Picker. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

The first thing you’ll need to do is build out the form itself and style it however you want.

Then, go ahead and add a regular text input field which you won’t need to style because it’ll just be replaced date range picker. Then add the following attribute to it:

ms-code-input=”date-range”

Making it work

Now that you’ve got the form set up and you’ve added the field for the date range picker, all you need to do is add the MemberScript #63 custom code to your page, before the closing body tag.

Here are a few things you can change in the custom code:

Selection color – to change the color of the selected days, just replace the HEX value of background-color.
Localization – to localize your date range picker, simply edit the text strings for the days, date format, button labels, etc.

Additionally, if you want to change the button colors, those are defined by the .btn CSS class.

Conclusion

That’s everything, you can now go ahead and test your form’s date range selector feature.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you add a date range selector to your Webflow forms.

Take me to the Script!

Read full documentation

Texte du bouton

#63 - Date Range Picker v0.1

Besoin d'aide avec ce MemberScript ?

Création du scénario Make.com

How to Add a Date Range Selector to your Webflow Form

Memberscripts needed:

Tutorial:

Cloneable:

Why/When Would You Need to Add a Date Range Selector to your Webflow Form?

Adding a date range selector to Webflow forms

Setting it up

Making it work

Conclusion

Take me to the Script!

Essayez Memberstack gratuitement

Produit

Langue

Clients

Entreprise

Ressources

Something not working as expected?