Add Date and Time Compatibility for Safari for LabArchives Widgets
Assist users in filling in dates and times with the correct format when using the Safari browser
This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.
You can find the full javascript code associated with this article in my GitHub repository https://github.com/gibson-amandag/LabArchivesWidgetTemplates/tree/main/_commonComponents/checkDatesForSafari
The Safari browser does not implement the date picker as Chrome does. As a result, users of your widget need to be guided as to how to enter dates in the format that is expected for calculations with those dates. Regardless of the user display value in Chrome, the val that is provided to the JavaScript is always in the international date format (ISO) of YYYY-MM-DD, and the user input in Safari must match this. Similarly, for time entries, the user must input the time as 24h time with the format HH:mm. This article will describe the process focusing on date formatting, however, the full js file contains the code to implement this for checking time entries, too.
Check if Browser Supports Date Inputs
This method creates a new input element of type date, with the assumption that date is supported. However, if upon checking the type of the new input, it does not equal “date,” supported is changed to false. This updates the value of the dateSupported property of my_widget_script. This new input is then removed.
Check if Date is Valid
This method uses a regular expression to check the user entry for a date input. If the entered value does not match the regular expression, the method returns false. It then creates a new Date object with the entered string, and tries to get a time from it. If there is no time (!dNum) and dNum is not false because it equals 0, then the method also returns false. Finally, if the ISO date string of the newly create Date object matches the user date string, the method returns true.
Set-Up Initial State
When initially creating the widget, I check if both date and time are supported. I add placeholders to each input of type date and type time to demonstrate the appropriate entry format. For each of these inputs, I run the checkDateFormat method, and this method is called again when the value of the field changes.
checkDateFormat()
This method first checks to see if date is supported by the browser. If not, it removes any previous date warnings after the input. Then, it gets the entered date string value, and runs the isValidDate method. If the date is not valid, it adds a warning with instructions for how to format the date. It also attaches an add-on datepicker to assist the user, and ends by resizing the entire widget.
Check if Form is_valid Before Saving
One of the default LabArchvies methods is is_valid which is run before allowing the user to save the widget. The variable fail should begin as false, but it is changed to true if any date or time is found to not be valid. Help text is also added to the fail_log. If fail is true, the method creates an alert for the user with the fail log. If fail is false, the method returns an empty array, which allows the form to save.
Adjust For Mode
When the widget is not being edited, this method removes the class hasDatePicker. This is necessary to prevent the user from being able to open the datePicker when the form is being viewed but not edited.
