Instead a date input acts like a regular text input. I wasn't able to verify it on Edge, but based on the fact that on Edge clicking the input triggers the popup, it should work similarly to Firefox because we stretch the invisible input over the whole button.įinally, I tested it also on iOS Safari, and the datepicker opened as expected:ĭetecting browsers that don't have a datepicker popupĪs mentioned above, some browsers (Safari, IE) don't have the datepicker functionality built-in. I also asked a friend to verify on Firefox on Windows, and they sent me a similar screenshot to the above. Works for Firefox (MacOS), which doesn't have a toggle: Works for Chrome (MacOS), which normally has the toggle: Here's how we'll structure the toggle-button in the HTML: Ideally this would be done without user-agent sniffing or any other method of hard-coded browser detection. I started searching and landed on this answer in StackOverflow, which does that for webkit browsers.įor point #3, we should not show the toggle at all because clicking on it won't do anything. That way, when the user clicks the toggle, they actually click the date input which triggers the popup.įor point #2, we should try to do the same but for the toggle-part of the date input. Some browsers (Safari, IE) don't open a popup at allįor point #1, we should be able to just make a date input invisible and stretch it on top of the toggle we want to display. Some browsers (Chrome) open the popup when you click a toggle-button.Some browsers (Firefox, Edge) don't have a toggle, and just open the popup when you click the input.So I needed to transform into a button-like element. To be sure, I tested and verified it in various browsers on MacOS.īased on this result, we can confidently listen to onchange event on a and get the same date format back no matter the platform.įirst of all, if your application needs a datepicker, I would strongly recommend just using as seen above! There really should be a specific reason for including a datepicker library when the out-of-the-box solution works so well.Īs noted in the beginning, however, for Helppo I had the requirement that the datepicker should be an extra button next to a regular text input. This is regardless of the fact that the visible format is locale-based in the input. Luckily this is not a problem! As per the MDN page, reading input.value should result in a consistent format:Įnter fullscreen mode Exit fullscreen mode In the case of Helppo I always wanted it in the same format (YYYY-MM-DD), but obviously it wouldn't really matter what the format was as long as it could be consistently parsed. There's no toggle to enable week numbers or year dropdowns the browser will either render such things, or it won't.Īnother concern was if the input value, when read via JavaScript, would be consistent between browsers. Whereas JS libraries allow for customization of styles and functionality, in the case of you don't really get that. This is similar to how datepicker JS libraries work. Either clicking on the input, or on a calendar-icon inside it, opens a datepicked popup. Screenshot by Mozilla Contributors is licensed under CC-BY-SA 2.5.Īs can be seen in the above screenshots, the default datepicker is a text input where the date is displayed in a locale-specific format. One thing I found out is that in Safari (and in IE, I hear) a date input acts like a regular text input, and has no datepicker. I added a couple of mine to the bottom of the list. MDN offers an incredibly helpful wiki page around, and it includes screenshots of the datepicker on various browsers. With these in mind I started experimenting and browsing StackOverflow. (If Helppo users begin requesting this functionality, then I will of course look into it.) From my experience, time picker UIs are generally more difficult to use than a regular text field. I didn't consider a time picker necessary. The datepicker element should be styleable via CSS. I had a couple of requirements and/or liberties, depending on how you want to look at it:īecause Helppo should (a) be able to display a date value in any format coming from the user's database, and (b) the format in which the user wants to input a new value should not be restricted, I wanted the datepicker to be a separate element next to a plain text field. I wanted to see if just a regular could do the job. Or pikaday (which has promising principles, although a lot of issues and PRs open) with ~210k weekly installs. For example, react-datepicker (which almost doubled the bundle size in the case of Helppo) with ~720k weekly installs. This is of course nothing new most sites use datepickers for this purpose.Īs a developer, there are plenty of ready-made options to choose from. For Helppo users, I wanted to offer a way to edit date and datetime values more conveniently than with a plain text input.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |