Wix Simple date entry field with auto-save. aka Date Picker without calendar

I went through 2 weeks of waiting on wix support to fix my date picker field problems. I got fed up and figured out a better way to enter dates.

Problem: Date Picker is not showing date value from data collection on load. Date Picker Calendar is giant and obnoxious on a repeater item. I don't like having to click submit button every time I change a value.

Solution: Convert Text Input into Date Input and why not add auto save feature as well. Display placeholder text if not date exists in dataset. Add Regex to Text field so it must be in date format.

How I did it:

• On a Dataset called #dataset7, I created a Date field called Date 1 with field key, date1. If you do not know how to find a field key, click here.

• On a repeater, I created a user Input field with type Text, (NOT THE TEXT BOX), called #input5, you can see the field key under properties to the right.

In this field's settings:

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 Corvid code editor at the bottom of the page and entered the following.

//Show Date in Text Input Box $w.onReady(function () { $w('#dataset7').onReady(() => { $w("#repeater1").onItemReady( ($w, itemData, index) => { var options = {year:'numeric',month:'numeric',day:'numeric'}; if (itemData.date1) { var dateText = itemData.startDate.toLocaleDateString('en-US', options); $w('#input5').value = dateText; } }) }) }); //AutoSave Date value with text input export function input5_blur(event, $w) { let $item = $w.at(event.context); let date1 = new Date($item("#input5").value);

if (!$item("#input5").value) {

$w('#jobsDataset').setFieldValue("date1", "")

} else {

$w('#jobsDataset').setFieldValue("date1", date1)

} return $w("#dataset7").save(); }

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()

Give tolocaldate string options for how to display date values with var options = {year:'numeric',month:'numeric',day:'numeric'};

Check to see if the database field contains data by checking if it is truthy (itemData.date1) {}

If it is truthy (contains data), then set a variable dateText equal to the value formatted with tolocaldatestring method.

Finally set the text input box equal to the variable dateText to display the date value.

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.

The following conditional statement check to see if the input box is empty, if so then place nothing into the database. Essentially a delete data function.

Otherwise set the database value equal to the value of the input box.

return $w("#dataset7").save(); is used to save the change to the dataset.

Save and Publish

Please comment and share if this was helpful or if you have any suggestions. Thank you for your time.