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

Ask the community
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