Simple Date Input without Calendar, like a text box with validation

Ask the community
1

#featurerequest
The date picker’s calendar is giant and not usable on smaller repeaters, because it can not fit.
A simple date field without the calendar would be ideal.

How can you create a user input text box that accepts date values, validates the format, and saves the value into a data collection date field.

On load it would need to show the collection date value if it contains data, but would show placeholder text if there were no data.

1 Like
2

Hey Andrew!

Awesome #FeatureRequest - this makes total sense, especially within the context of repeaters. Thanks!

3

Andrew,

Following up on your query (pun intended), I found some resources that may be of help to you: how to validate user input and user inputs and custom forms . Let me know if that does the trick!

4

Also, to add to what @sheyla wrote, you can require data fields in Wix Data to be specific, such as dates - Article here.

5

Click Here to learn how to create simple date entry field with auto-save. aka Date Picker without calendar

How to use

I solved my problem so here it is.
The date picker takes up to much space in repeaters, I wanted to enter a date without having to use the date picker and it display its date value if it contains data on load of each item. If it didn’t contain data in the dataset, I wanted to show placeholder text.

Current Wix Limitations solved by this code
Input boxes can not be set to date without Corvid.
Input boxes do not have date validation without Corvid.
No Auto save feature on input boxes.

On a Dataset called #dataset7 I created a Date and Time field called date1.
On a repeater I created a user Input with type Text, (NOT THE TEXT BOX) called #input5
I set it’s Placeholder text to “Start Date (MM/DD/YYYY)”
I set it’s Add pattern validation regex expression to ^(0?[1-9]|1[0-2])/(0?[1-9]|1\d|2\d|3[01])/(19|20)\d{2}$

I opened the code editor at the bottom of the page and entered the following.

//Once the dataset and repeater are loaded, set the input box equal to the //corresponding database value.
$w.onReady(function () {
    $w('#dataset7').onReady(() => {
        $w("#repeater1").onItemReady( ($w, itemData, index) => {
            $w('#input5').value = itemData.date1;
        })
    })
});

//AutoSave Date value with text input
export function input5_blur(event, $w) { 
 let $item = $w.at(event.context);
 let date1 = $item("#input5").value;
 $w('#dataset7').setFieldValue("date1", date1)
 return    $w("#dataset7").save();
}

828×341 25.8 KB

Code Explanation for part 1
Show the date1 value inside the input box if it contains data, otherwise show the placeholder text.
Load the Dataset with $w(‘#dataset7’).onReady()
Load the Repeater and its corresponding item with $w(“#repeater1”).onItemReady()
Set the Input box equal to the date1 value with $w(‘#input5’).value = itemData.date1;
If it does not contain data, it will just show the placeholder text.

Code Explanation for part 2
If an input change occurs and someone clicks out of that input box, autosave the value to the dataset.
Input5_blur(event, $w) is used to trigger an action if a value is changed and the person clicks out of that input box.
$w.at(event.context) selects items from a specific repeater item. Click here to see Execution Context
let date1 = $item(“#input5”).value; is used to create a constant and get the input box’s value.
We use $w(‘#dataset7’).setFieldValue(“date1”, date1) to set the date field in the dataset equal to the constant’s value.
return $w(“#dataset7”).save(); is used to save the current item in the data set.

Save and Publish

6

If you have any comments, code suggestions, please post here. All help is appreciated.

7

Thank you for sharing this Andrew.