DatePicker reading disabledDates from database [Solved]

Ask the community
,
1

Hi Guys

I have a database to which admin submits selected dates. I then want to use these dates to disable the dates on my client-facing datePicker. Simple enough, but I can’t get it to work…

I have simplified the script down to the following to see if I can find the problem, but I get no errors when running it, and it still doesn’t work. Any advice?..

$w.onReady(function () {
$w(‘#datesDataset’).onReady(() => {
wixData.query(“DisabledDates”)
.find()
.then((date1) => {
let firstItem = new Date(date1.items[0]);
$w(“#datePicker1”).disabledDates = firstItem.array;
});
});
});

2

Hi tiaan,
I’m not a professional programmer. I have checked the reference of wix code.
it sims you want to use the code below,

//Set dates which are disable..
let badDate1 = new Date(2017, 0, 13); 
let badDate2 = new Date(2017, 9, 13); 

$w("#myDatePicker").disabledDates = [badDate1, badDate2];

However, using new Date(date1.items[0]); it may be cannot get the result like new Date(2017, 0, 13);
if using one field for a single value may get the result you want.
For example,
field1 for year > 2017;
field2 for month > 0-12;
field3 for day > 0-31;

import wixData from 'wix-data';
$w.onReady(function(){
    wixData.query("DisableDates").find.then((date1)=>{
        if(date1.items.length >0){
            let disableDate = new Date(date1.field1, date1.field2, date1.field3);
            $w("#datePicker1").disabledDates = disableDate;
        }    
    });
});

Hope useful. Good luck,
Heson

3

Hi Heson

Thank you for the comment. I like this idea, however after trying it I realized it takes me back to the same problem…

I’ve played with the code a bit and got it to work if I hardcode the date, for instance (2018, 2, 28), but then when I try to pull the date from the db, it gives me all sorts of errors, most notably, ‘must be a type of date’. Now, I’ve tried just about all the different methods trying to set the date to come out as (2018, 2, 28), but no luck… I’ve even gone as far as to change the db field to a text value, type in ‘2018, 2, 28’ and trying to post this value, but still no luck…

I think the problem obviously lies in outputting the correct format, I just haven’t had any luck yet…

4

When I do this, it works:

$w.onReady(function () {
	$w("#datesDataset").onReady(() => {
		wixData.query("DisabledDates")
			.isEmpty('title')
			.find()
			.then((date1) => {
				let firstItem = date1.items[0];
				let badDate33 = new Date(2018, 1, 28);
				$w("#text71").text = firstItem.date1;	//displays my output value
				$w("#datePicker1").disabledDates = [badDate33];
		});
	});
});

Then, when I try to pull the same info on from the db, it doesn’t work…

$w.onReady(function () {
	$w("#datesDataset").onReady(() => {
		wixData.query("DisabledDates")
			.isEmpty('title')
			.find()
			.then((date1) => {
				let firstItem = date1.items[0];
				let badDate33 = new Date(firstItem.date1);
				$w("#text71").text = firstItem.date1;	//displays my output value
				$w("#datePicker1").disabledDates = [badDate33];
		});
	});
});

firstItem.date1 pulls through the data displayed in the attached image and successfully displays it in #text71

1331×838 35.8 KB

5

Hi again,
I change some of the code, hope this work.

import wixData from 'wix-data'; 

$w.onReady(function(){     
    wixData.query("DisableDates").find.then((date1)=>{ 
        if(date1.items.length >0){ 
            let date = date1.items;
            
            let dateField01 = date.field1;
            let field01 = Number(dateField01);
            
            let dateField02 = date.field2; 
            let field02 = Number(dateField02);
            
            let dateField03 = date.field3; 
            let field03 = Number(dateField03);
            
            let disableDate = new Date(field01, field02, field03); 
            $w("#datePicker1").disabledDates = disableDate; 
        } 
    }); 
});

The concept is that 2018, 1, 28 three of them must be a number. When they call from query, type of them may be string. Therefore, it cannot do a function in new Date( );

Good luck,
Heson

6

Solution:

Just some context - Admin staff selects a date from the datePicker in the admin page that posts this selected date to a date field called ‘date1’ in the database(DisabledDates). The script below reads this date, converts it to the right format, and posts this date to the datePicker on the client-facing page, disabling the the date on client-facing datePicker

$w.onReady(function () {
	$w("#datesDataset").onReady(() => {
		wixData.query("DisabledDates")
			.isEmpty('title')
			.find()
			.then((date1) => {
				let firstItem = (date1.items[0]);
				let badDate1 = new Date(firstItem.date1.toISOString().slice(0,10));
				$w("#datePicker1").disabledDates = [badDate1];
		});
	});
});
7

Thank you for the solution - that got me most of the way.

I have an unknown number of entries in the database, each with a date that must be disabled in the datepicker. Do you know how to edit your code above to achieve this?

EDIT, SOLVED: For anyone else needing a loop-approach to disabling dates, the answer is here: https://www.wix.com/code/home/forum/community-discussion/help-needed-creating-a-loop-to-check-for-db-items