Vorbly <Code>

CODING MADE EASY WITH VORBLY

WIX DATEPICKERS HOTEL PRICING CALCULATIONS

Starting a hotel booking website? This tutorial will show you how to count the days between two Wix Datepicker. We will provide you with the webpage elements and sample codes required to implement this feature.

THE DEMO

1/3

THE ELEMENTS

The Page

Datepicker Element:

  • Start Date: #datePicker1

  • End Date: #datePicker2

Text Element:

  • Per Night Pricing: #UnitPrice

  • Total Pricing (days X UnitPrice): #FinalPrice

The Database

Create a database: Hotels (dataset1)

Recommended fields:

  • Hotel Name Field: HotelName

  • Hotel Description Field: description

  • Unit Price Field: UnitPrice (for price calculations)

  • Image Fields: For image gallery

Create a dynamic page for your hotels or products or services.

The Dynamic Page

Create a dyanmic page: Hotels (Title)

Link fields on dynamic page to your database.​

THE CODE

Page Code

$w.onReady( function () {

        getDates();

});

 

export function date_diff_indays() {

        let dt1 = new Date($w("#datePicker1").value);

        let dt2 = new Date($w("#datePicker2").value);

return Math.floor((Date.UTC(dt2.getFullYear(), dt2.getMonth(), dt2.getDate()) - Date.UTC(dt1.getFullYear(), dt1.getMonth(), dt1.getDate()) ) /(1000 * 60 * 60 * 24));

}

 

function getDates(){

        let diff = date_diff_indays();

        const rates = (Number(diff)*Number($w("#UnitPrice").text));

                  $w("#FinalPrice").text = String(rates);

                  $w("#days").text = String(Number(diff));

}

 

export function datePicker1_change(event, $w) {

        let date1 = $w("#datePicker1").value;

        getDates();

}

 

export function datePicker2_change(event, $w) {

        let date2 = $w("#datePicker2").value;

        getDates();

}

COMMENTS

I'm a paragraph. Click here to add your own text and edit me. It's easy.

WEB DESIGN & DEVELOPMENT SOLUTIONS

GET PROFESSIONAL HELP