Hi Guys,
I have an issue with my form and database. I am actually developing a booking form for my business but having issue with storing date of birth. I want to allow users to enter date of birth using three separate dropdowns like “Day, Month & Year”. And I want to store All these three dropdown’s values in one Database collection field named “Date of Birth” in a format like “01 January 2019”.
I tried some basic tricks and codes available in the internet but It didn’t worked out.
So I need immediate help. So please help me.
Thank you.
Manish,
I’m assuming that you have your dropdown choices populated. The following code will get a date value in the format that you want. You would create an onChange event for the day dropdown.
export function dropdownDay_change(event) {
// Set some the format.
const options = {
day: "numeric",
month: "long",
year: "numeric"
};
let YearValue = Number($w('#dropdownYear').value);
let MonthValue = Number($w('#dropdownMonth').value)-1;
let DayValue = Number($w('#dropdownDay').value);
let chosenDate = new Date(YearValue,MonthValue,DayValue,0,0,0);
console.log(chosenDate);
// Writes to the date field the chosen date in British English Gregorian
$w('#dataset1').setFieldValue("timeentry",chosenDate.toLocaleDateString("en-GB-u-ca", options));
console.log(chosenDate.toLocaleDateString("en-GB-u-ca", options));
$w('#dataset1').save();
}
Hi Anthony,
Thanks for your quick response, Can you tell me what is “#dataset1” & “timeentry”? Is is property of any form field or it is database collection’s field property?
Hi Anthony.
I tried but it doesn’t work.
I have made a video of my form and database collection field where I want to store the values of these dropdown fields. So Please watch it and help so that I can fix it.
https://www.useloom.com/share/05609bfa8d434acab4ca5a8d2b18f688
Thankyou
Manish, I should have defined those. “#Dataset1” is simply the dataset created for the collection where I was storing the result in a field called “timeentry”. The intention was for you to substitute your names for the dataset and field.
@tony-brunsman So I hope you you have also checked the below comment and video that I shared from loom that shows my database, and form fields which I wanna connect. So Would it still work?
@tony-brunsman I am getting error. In form submission, It shows Invalid in collection field. Please check the screenshot. By the way, I have selected Field-type ““Text””. So will it be a problem? I also tried it in “Date & Time” field type but it still shows Invalid text in the collection field.
@downloadcrazy514 , one of the next things that I was going to suggest is that you change the field type to “Text”. It writes to the field either way when I do it, so there must be something to adjust in the code. At this point, I would need to see your current code in order to suggest anything.
@tony-brunsman I have tested three field types, 1: text. 2: rich text, 3: Date & Time and all of them shows invalid Date…
export function day1_change(event) {
// Set some the format.
const options = {
day: “numeric”,
month: “long”,
year: “numeric”
};
let YearValue = Number($w(‘#year1’).value);
let MonthValue = Number($w(‘#month1’).value)-1;
let DayValue = Number($w(‘#day1’).value);
let chosenDate = new Date(YearValue,MonthValue,DayValue,0,0,0);
console.log(chosenDate);
// Writes to the date field the chosen date in British English Gregorian
$w(‘#bookingdata’).setFieldValue(“primaryDateOfBirth”,chosenDate.toLocaleDateString(“en-GB-u-ca”, options));
console.log(chosenDate.toLocaleDateString(“en-GB-u-ca”, options));
$w(‘#bookingdata’).save();
}
This is the complete code by replacing my form fields and collection fields IDs
@tony-brunsman Can you explain what is “-1” after the .value in this code line?
let MonthValue = Number($w(’ #month1 ').value)-1;
@downloadcrazy514 The date object in JavaScript functions that way: January is 0, February is 1, and so on. Why? Because they said so!
So, what do you see in the developer console at the bottom when you select the day option? Does that say “invalid date” too?
@tony-brunsman Yes, It shows the same Invalid date message in Developer console as well. See the screen shot. Can help please suggest, why it shows?
@tony-brunsman Is it important to connect any of these date of birth fields “Day, Month or year” should be connected to that collection field where data has to be saved?
@downloadcrazy514 I see the issue. One of my next questions was going to be about how your dropdowns are populated. Everything depends on being able to convert to numeric for the Date function. It’s fine to show the written out month in the dropdown, but make sure you set the value to the corresponding number. Of course, if you do it like I have it here, you can remove the “-1” from the code.
@tony-brunsman My month dropdown items are as on the screenshot, please check and suggest. I tried with current dropdown items by removing -1 from code but got the same result.
@downloadcrazy514 All you need to do is choose “Edit Value” and change the value of all of these to a number.
@tony-brunsman Finally it worked. Thanks a lot Anthony.
If you can guide me for one more thing on this form then I think you will a be a life saver for me.
I am using a dropdown field that is connected to another database to load dropdown lists. This dropdown list loads name of all available trips and one trip can be selected by user. But I wanted to show another field (Read Only) “Trip Date” just beside this dropdown select field. and Trip date only shows the date of the selected trip from connected database once user select any trip.
Now please see the screenshot of the form’s trips dropdown field and date display text where selected trip’s date will be displayed only for user’s notice. but it will not be edited but will directly be saved to another data collection where entire form data is being saved.
1: All Products Dataset sends all trips list to dropdown lists
2: User select a trip
3: This selection initiate a request on All Products Dataset to send the same trip date which is selected from dropdown list and datasend sends the selected trip’s data and displays to this TripDuration text field (Or any other field type)
4: On submit both these fields including rest of the form data gets saved to Booking Dataset.
I hope I could explain you properly.
@downloadcrazy514 I’m glad the date selector is working properly for you.
I’m not really sure what your question is. Could you show me a screen shot of the AllProducts collection?
@downloadcrazy514 You could put a query in the onChange event of the trips dropdown that would obtain the same row from AllProducts and get the trip dates. Change the names as needed, of course. Remember, that you want to use the field key in the query. I didn’t know if was ‘Name’ or ‘name’. It is case-sensitive.
export function dropdown1_change(event) {
wixData.query(“AllProducts”)
.eq(“name”,$w(‘#dropdown1’).value)
.find()
.then( (results) => {
if (results.items.length > 0) {
$w(‘#TripDuration’).text = results.items[0].tripDates;
} else {
// handle case where no matching items found
}
} )
. catch ( (err) => {
let errorMsg = err;
} );
}
You can take it from here.
