Add Date and Time Compatibility for Safari for LabArchives Widgets

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

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.


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.




PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top CI/CD providers for Flutter

GKE Authentication and Authorization between Cloud IAM and RBAC

16 specific tasks a project management AI can do for you

report on project revenue and profit

Java , the good the bad and the ugly

Introduction to Orange Tool

How to Schedule Tasks in Ubuntu using Cron Job

😈TOP 7 Reasons Why A Developer Can Kiss His Productivity Goodbye✋

WVB Operating System(Eighth Stage)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amanda G. Gibson

Amanda G. Gibson

PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science.

More from Medium

Dynamically Triggering a CodeBuild Project with GitHub Webhook Events

This is my second story

Assignment 6: WET Layout

5 simple extensions in VScode