Trying to update product quantity based on datepicker selection

[thomasbernierr]

Hey guys,

I’m creating a site where people can rent out exotic cars, I’m struggling with one thing tho! I’ve added in the DateRangePicker.js library and I’ve got it all setup and working besides this.

I’m trying to have the product quantity increase depending on the amount of days the customer selected on the calendar. I’m not sure if it’s possible to have the price update as well once they choose the amount of days! I’ve attached the datepicker.js file I’ve created. I’ve got it working to so once they selected the dates they get stored as properties and then added as line items once they click add to cart!

The add to cart buttons are also disabled until they choose a date!

Here is a link to the page product page where it’s happening! It will only show on the exotic car products as I have

https://swayluxx.com/products/roll-royce-dawn

Any help would be greatly appreciated.

$(document).ready(function () {
  const addToCartBtn = $('[type="submit"]');
  const buyNowBtn = $('.buy-now-btn-class');

$('#datePicker').daterangepicker({
    minDate: moment(),
    opens: 'center',
    autoUpdateInput: false,
    locale: {
      format: 'YYYY-MM-DD',
    },
  });

  $('#datePicker').on('apply.daterangepicker', function (ev, picker) {
    const startDate = picker.startDate;
    const endDate = picker.endDate;
    const duration = endDate.diff(startDate, 'days') + 1;

     if (duration > 0) {
    $('.cart-item__quantity').val(duration);
      addToCartBtn.removeAttr('disabled');
      buyNowBtn.removeAttr('disabled');
      $(this).val(startDate.format('YYYY-MM-DD') + ' - ' + endDate.format('YYYY-MM-DD'));
    }
  });
  

  addToCartBtn.attr('disabled', 'disabled');
  buyNowBtn.attr('disabled', 'disabled');

    addToCartBtn.on('click', function () {
    const datePicker = $('#datePicker').data('daterangepicker');
    const startDate = datePicker.startDate.format('YYYY-MM-DD');
    const endDate = datePicker.endDate.format('YYYY-MM-DD');
  });
});

[gr_trading]

Hi @thomasbernierr ,

Yes, it’s possible to implement.

Check out my previous work, similar to this.

https://houseoftierney.com.au/products/custom-reclaimed-timber-sign

The difference is you want a date picker instead of a textbox.

Let me know if you are looking to hire someone for this. Details are in bio.

[EasifyApps-Zoe]

Hi @thomasbernierr ,

Calculating total price through a date picker can be complex. However, consider an alternative approach I’d like to suggest—though it tackles the issue differently.

You can offer customers a custom option to input the number of days they wish to rent the car. By setting a per-day rental cost, the total expense can be automatically calculated. Achieving this is easy with the Easify Product Options app. Here’s how :

• Start by creating a new option set:

• Add a “Rental Duration (Days)” option using the Quantity option type:

• Define details for the Quantity option, and set the corresponding price per day (e.g., $100/day).

• Select the relevant products on your site to which you wish to apply this custom option:

Exploring Easify Product Options might be a solution for your store. Give it a try—I believe it’s an ideal fit !

[EasifyApps-Zoe]

Oh, I forgot to mention that with the Easify Product Options app, you can effortlessly create Date Range selections and File Uploads just like in your current store. The app offers a selection of 25 diverse option input types for you to explore !