12.24.0
The defaultDate/default_date prop has a null or empty string value by default. You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load. Use Ruby UTC DateTime objects and convert them to ISO date strings with DateTime.now.utc.iso8601.
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See this GitHub issue for more information and the anti-pattern examples below.
Setting the allowInput prop to true permits users to key values directly into the input. This prop is set to false by default.
The date picker is built with the text input kit. Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions. The value attribute is automatically handled and bound to whatever date string is contained by the input field. You cannot pass a custom value prop. id props passed to the date picker kit will be assigned to it's parent/wrapper div. The pickerId prop is passed directly to the input and is required to instatiate the date picker.
You must use inputAria or input_aria and inputData or input_data props if you wish to pass data or aria attributes to the text input kit. If you use data or aria props they will be passed to the date picker kit itself instead. Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
The placeholder prop has a default string value: "Select Date". You can replace this with your own string or an empty string if you'd prefer it blank.
Default label prop is "Date Picker". To remove the label set the hideLabel prop in React or the hide_label prop in Rails to true.
A full list of formatting tokens, i.e. "m/d/Y" can be found here.
You can find a full list of flatpickr events and hooks in their documentation.
Defaults to [1900, 2100]. Combine with min-max prop for best results.
By default selectType prop is disabled. To activate it set selectionType prop in JSX/TSX to month. To activate it set selection_type prop in a rails file to month.
By default selectType prop is disabled. To activate it set selectionType prop in JSX/TSX to week. To activate it set selection_type prop in a rails file to week.
To select time as well, you should pass the enableTime boolean prop. You can also enable timezone display by passing showTimezone.
Datepicker supports position options from Flatpickr Options Documentation. There are multiple positioning options to choose from.
Note: In order for the above prop to work properly, you must also send staticPosition={false} to your Datepicker kit instance.
Upon adding static={false} to the date picker, you will notice that the date picker detaches from the input field while scrolling. This is a known Flatpickr nuance. By adding the scrollContainer prop, you can tell the date picker which DOM container it should watch for scroll events. In this example, you can see that scrollContainer=".pb--page--content--main" is being passed in order to keep the date picker correctly positioned on page scroll.
Useage: scrollContainer: .validQuerySelectorHere
Validation displays an error with red border and red text below indicating that the user must fill out the field.
Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.
By default textTransform = "none". If there is a need to enforce lowercase, please pass the textTransform = "lowercase prop.
The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. treeData is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
For the React version of the kit, the onSelect prop returns an array of all checked items, irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
For the Rails version, the array of checked items is attached to the DOM in a data attribute titled data-tree on the wrapping div around the MultiLevelSelect.
The returnAllSelected or return_all_selected prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
NOTE :This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. returnAllSelected is set to false by default.
This example shows how to enhance the passphrase strenght by setting diferent thresholds and lengths.
The meterSettings array contains different settings for each rendered input. The handleStrengthCalculation handles the strength calculation using those settings, showing different results for the same passphrase input.
By default, minLength is 12. Try typing any value in the Default Example input. Notice that the bar won't change from red until the minimum is met.
Adjust these props to tune the sensitivity of the bar.
Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.
This example depends on the zxcvbn library.
You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.
inputProps is passed directly to an underlying Text Input kit. See the specific docs here for more details.
showTipsBelow(react) / show_tips_below(rails) takes 'xs', 'sm', 'md', 'lg', 'xl' and only show the tips below the given screen size. Similar to the responsive table breakpoints. Omit this prop to always show.
Strength is calculated on a 0-4 scale by the Zxcvbn package.
This example depends on the zxcvbn library.
You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.
This example depends on the zxcvbn library.
You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.
Use HaveIBeenPwned's API to check for breached passwords.
As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
Should it fail, the feedback will express the passphrase is too common, prompting the user to change.
This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.
This example depends on the zxcvbn library and haveibeenpwned API.
You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.
NOTE: Error state is handled by default, validating length (too long or too short) relative to the selected country’s phone format and enforcing numeric-only values for all countries.
Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.
Setting an initial country preselects that country within the input as well as the country dropdown.
Limiting countries removes all countries from the dropdown except your selections.
Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).