AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |
Back to Blog
Moment js date validation9/23/2023 ![]() This is directly passed into the basic input type="date" HTML element, which takes option attributes for min and max. The DateInput component takes in minDate and maxDate props. If you're interested, check out the react-intl package which helps you out with internationalisation for your React app. If you've not come across the intl.formatMessage() bit before, you can ignore it - it just spits out a string. I won't go into the innards of the components, but you can assume they just pass through any validation rules as props. Start date and time // End date and time □□ The DateInput is a wrapper for a react-datepicker date component (which allows for nicer date pickers). I created 2 custom components - DateInput and TimeInput - that look like this. Upon submission of Form 1, the values for the fields are updated and stored in the Redux state.If the end date equals the start date, the end time must be 1 hour or more after the start time.The end date cannot be earlier than the start date. The end date cannot be later than today.Two separate Formik forms with two input fields in each:.If you're using Formik for form management, using Yup is just one extra small step as Formik already accepts Yup validation objects out of the box. If you're not familiar with Yup validation, it's a package I'd really recommend as a simple, lightweight way to run Object based validation. Remember this blog post on time input fields? In a somewhat related post, I'm going to write about how I used Yup validation with my Formik forms, to test for valid inputs, in the event that proper date and time input fields are actually rendered by the browser. ![]()
0 Comments
Read More
Leave a Reply. |