Date Picker Set Min Date

Ask the community
,
1

I’m using 2 date Pickers: The first ($w"#dateStart") is to set the start date for a service and the second ($w"#dateEnd") is to set the End Date of the service.
How can I code the second date picker so that the minimum selection date should be that of the first date picker?

Im using wrong this code:

export function dateStart_change(event) {
let theMinDate = $w(“#dateStart”).minDate;
$w(“#dateEnd”).value = theMinDate();
}

2

There are many ways to do something similar. The first one you can change to match your own criteria.

See Datepicker api reference here.
https://www.wix.com/corvid/reference/$w.DatePicker.html

Also, have a read of displaying dates.
https://support.wix.com/en/article/corvid-formatting-dates
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toDateString
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

You can change dates from within code yourself as below:

THE ELEMENTS
The Page
Datepicker Element: #datePicker1

THE CODE
Page Code
$w.onReady(function () {

let today = new Date();
let startDate = new Date(today);

startDate.setDate(startDate.getDate() + 1); // Start Date +1 day from today //
let endDate = new Date(today);

endDate.setMonth(endDate.getMonth() + 1); // End Date +1 month from today //
// Set min & max dates //

$w("#datePicker1").minDate = startDate;
$w("#datePicker1").maxDate = endDate;
});
});

You can set your start and date fields from a dataset with set times from fields:

THE ELEMENTS
The Page
Datepicker Element: #datePicker1
The Database
Create a database: Booking (dataset1)
​Recommended fields:
Start Date: start
End Date: end
​Create a dynamic page for your hotels or products or services.

THE CODE
Page Code
$w.onReady(function () {
$w("#dataset1").onReady(() => {

// Retrieve min & max dates from dataset //
let startDate = $w("#dataset1").getCurrentItem().start;
let endDate = $w("#dataset1").getCurrentItem().end;

// Set min & max dates for datepickers //
$w("#datePicker1").minDate = startDate;
$w("#datePicker1").maxDate = endDate;
$w("#datePicker2").minDate = startDate;
$w("#datePicker2").maxDate = endDate;

});
});

You can count the days between the date pickers:

THE ELEMENTS
The Page
Datepicker Element:
Start Date: #datePicker1
End Date: #datePicker2
​Text Element: #days (display no. of days)

THE CODE
Page Code
$w.onReady( function () {
getDates();
});
​
export function diff_days() {
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 = diff_days();
$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();
}
3

thanks!! but how to make datePicker2 get the selected date from datePicker1 ?