Pick a Date is a simple, but powerful widget designed to add date and time selection functionality to the stock Muse forms. Use this widget any time you'd like your site users to be able to set appointments or reservations. Customize your popup with date range, time range, font options and more.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.3
Supported Devices: Desktop, Tablet, Phone
Release Log
1.3: Fixed bug causing date and time text to be doubled up in form field, corrected improper labeling of 12:00pm time label (01/13/2017)
1.2: Updated to allow full functionality of multiple instances of the widget within a single form, allowing for beginning and end dates & times to be entered (06/24/2016)
1.1: Added support for 24hr format in addition to standard 12hr format (05/04/2016)
1.0: Adds collapsible panel functionality and support for responsive Muse
Setup
This widget works in conjunction with the standard Muse forms. Grab a form from the Widgets Library panel and drop it into your project in Design mode.
Set the form up with the fields you need and style as you like.
Add a custom Single Line Text field using the form's option panel. If using both date and time options, add two custom fields. Label the custom fields appropriately.
Select the individual field in the form that you would like to use for the date picker. Use the Graphic Style panel to apply a unique graphic style to the custom field. Repeat this process for the time picker field, if applicable.
Drag the Pick A Date widget from the library and drop into your project.
You can place the widget wherever you like. Feel free to set it off canvas.
Open the widget option panel and enter the graphic styles you applied to the custom form fields.
Use the Date Settings, Time Settings, and Styling sections to fine tune the options and styling seen in the date and time picker pop ups
If you're new to using Muse forms, keep in mind that even though you're only working with one form, each field within the form is editable. When applying graphic styles, double check that you have selected the field itself, rather than the entire form.
Forms have many states, such as "Submit in Progress", "Submit Success", and "Submit Error". Use the states dropdown to select states to edit. And keep in mind that individual fields have their own states.