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
Add two Wix Datepickers and text element to your webpage. Then add the Wix Code to your page to count the number of days between datepickers.
Add two Wix Datepickers and text element to your webpage. Then add the Wix Code to your page to count the number of days between datepickers.
When users check-in and check-out dates in both datepickers, the number of days will be multiplied by the per night price.
Add two Wix Datepickers and text element to your webpage. Then add the Wix Code to your page to count the number of days between datepickers.
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.