Calendar/DateTimePicker Component

[jeffcarbs]

There was a long-standing issue in SUI-core (Semantic-Org/Semantic-UI#3256) to add a date picker component. @mdehoog opened a PR but never made it into SUI-core, so it eventually turned into a third-party plugin https://github.com/mdehoog/Semantic-UI-Calendar.

I'm currently using this plugin in my React app and it's awesome! Given that it's built using existing SUI components (popup, table, label, icon) it fits right in.

The downsides is that, since it's using SUI-core, it brings in jQuery as a dependency 😐 Also given that it's jQuery-based it a little difficult to fit into the React world. I wound up wrapping it with an internal component to abstract some of the complexity, but ideally I wouldn't have to do that.

I think this may be something we could implement in this library as an add-on. The one thing I'm not sure how we'll want to handle is the CSS. The plugin mostly uses default SUI styles, but does have it's own LESS styling (definition/overrides/variables). I'm thinking we could just add the minified css on the docs site and include a "Heads up!" in the documentation for this component that you'd have to add the styles to your build manually

@levithomason - would love to get your thoughts here!

[levithomason]

Hmm. I know the pains of a missing date/time component as we've had to build our own in our apps. I've also seen this issue in SUI core, though, I had not seen the third party module. I'd like to clear my head first of my initial reservations (thinking out loud):

1. It is not SUI core. The addons we've added so far are mostly variations of core components or sugar for core components. Except the Portal, which is a necessary React tool.

2. CSS. One of our design goals has been to remain CSS free. People already seema little confused about this. We get a lot of questions about how to setup or use a CSS theme or people confused as to why components aren't working, due to missing CSS. Thankfully someone added some docs on how to setup CSS. I'd like to simplify how styles are handled as much as possible.

3. I believe I share some of the same sentiments Jack expressed regarding the range selection experience.

   Check www.kayak.com or www.expedia.com for the expected ui. It would have to be two inputs that move the same calendar popup, and show a selected range of dates.

My initial reaction here is that we do not add this exact component as an addon. Though, I think I'm up for adding a date/time picker that is inspired by this one but also takes some cues from Jack's comments and some other great date/time pickers. All the date pickers below have things in common that are missing in the 3rd party SUI module. Most obvious to me are showing two calendars in one popup and highlighting the range of dates. Also, they feel much smoother whereas the experience of the 3rd party SUI module, IMHO, feels a little cluttered/jarring:

1. www.kayak.com
2. www.expedia.com
3. www.github.com/airbnb/react-dates (same as their live site, also mobile friendly)

There are also several other React date picker inspirations here http://react.rocks/tag/DatePicker

I believe the cluttered/jarring issues can be solved by removing the table borders and maintaining the same size element as the content changes.

As far as the CSS issue, I have an unpublicised goal of supporting simplified SUI theme builds in this project somehow. I have several ideas on this but the end goal is to allow customization of component variables and overrides and the ability to include only the stylesheets for the components you are using. If I get into gear on this, the date/time component CSS would not be an issue as we'd have a standardized and documented way to generate CSS, including for addons.

That is my brain dump for now. LMK your thoughts.

[jeffcarbs]

Personally, I'd love to see this calendar/datepicker component officially brought into SUI-core. Then we could implement the same functionality to keep this lib 1-1 with core 🎉

@jlukic - I'd love your thoughts on the SUI-calendar add-on, specifically what's missing and what would it take for it to be absorbed into SUI-core. Judging from that original issue, there's a ton of community interest in it. And I obviously can't speak for @mdehoog but looking through that issue/PR he has seemed pretty amenable to feedback on improvements.

@levithomason - to your feedback:

Date Range
There actually is highlighted date range support (see the 4th example: https://jsbin.com/ruqakehefa). It even auto-advances focus from the "start" to the "end" when you select a start date. I looked through the examples you provided:

• www.kayak.com - focus auto-advances, the popup slides, range is highlighted
• www.expedia.com - focus/popup doesn't auto advance, only the range is highlighted
• www.github.com/airbnb/react-dates - the popup remains fixed but the "pointer" moves, range is highlighted.

Multiple months at a time
Agree this should probably be a configurable option, just opened an issue (mdehoog/Semantic-UI-Calendar#14)

I believe the cluttered/jarring issues can be solved by removing the table borders and maintaining the same size element as the content changes.

This is more of CSS issue and could be solved customizing your build via calendar.variables in an eventual SUI-less build.

Also one thing not mentioned above but that's pretty important for my use-case is the timepicker portion. I've tested many different React date/time picker libraries and I think this is the easiest and most intuitive time picking implementation I've seen.

[levithomason]

Well, I have no strong reservations against it. The initial addon can do as you suggested and give a heads up message that they'll need to include the 3rd party repo. Perhaps getting in our project will help bring some more activity and standardization to it, possibly even help if land in SUI core.

[levithomason]

To be clear, I've labeled this as enhancement as I'd gladly merge a good implementation of it 👍

[neekey]

@jcarbo Thanks for pointing out the Airbnb react-dates, it almost fulfills all the user cases, especially for mobile devices.

[layershifter]

I think that the work on the implementing of our own calendar is very
time-consuming, especially since there is no such component in the SUI core. I'm also think, that we need leave this repo CSS free.

---

However, calendar/picker component is very needful UI component. I'm using in my app react-day-picker, my goals are reached there:

• localization;
• custom day render;
• ranges;
• disabled days/day modifiers.

---

Looks that there no chance for SUI calendar in near future, so we can implement own calendar in separate repo that will contain CSS.

[levithomason]

I like the idea of not including CSS here. I have longer term goals for CSS I'd like to implement, someday, time permitting (#1009).

I know Jack is not planning on doing more than 10-30 issues of maintenance a month on SUI core, so there is little chance of any big improvements coming there. This is also what makes me think we should consider a long term CSS solution. SUI core CSS doesn't really have a plan or team behind it. At the pace we're moving, I think it is going to make sense at some point to manage our own CSS as well.

[cschmidli]

@jcarbo would you mind sharing the example how you used Semantic-UI-Calendar with a custom component?

I think in general it would be great if there are some good workaround examples available until there's a native component provided. Almost every application we build needs a date picker some where :)

For example, if someone created some custom css to style react-day-picker (or any other datepicker library) to make it look somewhat semantic-ui-ish, it would be quite helpful.

[jeffcarbs]

@sagax85 - Just copy/pasted into a gist: https://gist.github.com/jcarbo/2f55ad9bf40f146b21e7c64327e9484c

As mentioned in the description, there's some ugliness needed to workaround the fact that SUI-calendar is using jquery to update the DOM outside of React. Also, SUI-calendar doesn't do a proper module export so there's some ugliness needed to require it appropriately.

Some other notes:

• it should be pretty reusable as-is but may be somewhat tailored to my app - I haven't tried to use it outside of my app's context.
• in my app, $ is jquery which is made globally available via webpack which is why you don't see it imported at the top.
• it doesn't enable all of the use-cases (e.g. with a button trigger, inline) that are possible with SUI-calendar (https://jsbin.com/ruqakehefa/) but would probably be straightforward to make those possible.

Hope this helps!

[cschmidli]

thanks a lot @jcarbo :)

[tarang9211]

@levithomason is the requirement for a new calendar component still on? i'd love to help out in creating a new component.

[levithomason]

This component can be developed here in this repo for convenience, then, once complete we can move it to a separate repo. Whoever starts work on it please leave a comment here so others know not to work on it in duplicate.

[harel]

Just dropping some thoughts here if I may:
The examples given (kayak, expedia, airbnb) are all valid but focus on a date range scenario and ignoring time. The SUI core plugin (https://github.com/mdehoog/Semantic-UI-Calendar) covers time and date ranges as well as other use cases, but is jQuery dependant. For me personally, time selection is a must, as well as date ranges (though in my case, the range also contains time, and in some cases a range is a time-range, not a date-range).
In my case therefore, the joined calendar double field works less well once time is factored in, and a two-field solution works better.
If a date/time picker is to be done it needs to cover all use cases - ranges, time, date range, time range etc.
Since the components used to create the picker can be core semantic components (css-wise), it might be possible to keep it CSS-less.
The more I think about it, the more I understand why this was never added to core.
Not putting my name down just yet due to some obligations I must sort out first, but I am going to start fiddling with some stuff to see where it takes me.

[levithomason]

Thanks for the comments. One clarification, Semantic-UI-Calendar is a community plugin and not a not a core plugin.

After your notes, I'm now entertaining the idea of having separate components, one for dates (calendar) and one for times. This would help with tests and features. If needed, we could also then wrap these in a date+time picker with ideal options exposed. Food for thought at least.

[tarang9211]

Although, I'm fairly new to this repo, I'm happy to help out.

[joaohenriquepda]

A temporary solution https://www.npmjs.com/package/react-datepicker

[nnurmano]

@joaohenriquepda Did you tested react-datepicker component, does it works?

[bintoll]

@jcarbo Hello! Could you please describe why

SUI-calendar is using jquery to update the DOM outside of React

is a problem?

I used
import { calendar } from 'semantic-ui-calendar/dist/calendar';
to import calendar.
And wrap html code code of calendar in new react component render return. And add these lines:
componentDidMount() { $('body').append('<script>$("#example1").calendar(); </script>'); }
everything works well

[levithomason]

@bintoll http://react.semantic-ui.com/introduction#jquery-free. You can get away with it in some cases, but it will bite you eventually.

[bintoll]

@levithomason Thank you! Now i understand. Also thanks @jcarbo for example of usage. Hope someone who knows the subject good will port this lib to react.

[harel]

I am officially putting my name down then.... I'm doing it...

[levithomason]

Go @harel!

[imoby]

@harel @levithomason any idea if this will also be themeable?

[levithomason]

@imoby We will try to use as many existing components as possible so that it takes on the feel of your app. However, some parts must be custom.

@alnorris This should be getting direct attention from me now. Don't know about a deadline, but it is being worked on actively.

[levithomason]

@nomadus The best way to move things forward is to take helpful action.

[p3nGu1nZz]

I assume there still isn't any progress on this.. however in my travels i came across this.

repo => https://github.com/YouCanBookMe/react-datetime
example => https://codepen.io/simeg/pen/mEmQmP

SUI React has a lovely extensible form component for custom controls

<Form.Field label='Date' control={Datetime} className='something'/>

then you can style with css to match your theme like all other custom styles.

however i would like to see this as part of native SUI... ill add it to my giant list of things to do ;)

[levithomason]

Very cool. Someday, I'm supposed to finish #1240. I'm quite embarrassed about the timeline there. My time has gotten away from me on that one.

[abumalick]

if you want some inspiration: https://ant.design/components/date-picker/

[levithomason]

Actually, I need available time :) Thanks for the reference anyway.

[p3nGu1nZz]

tell me about it, im backlogged on my main project which is why i haven't been able to contribute more to this or the theme stuff we talked about.

[davidhenley]

So, while this gets worked on, what is the current best Datepicker that fits into a Semantic-UI form without looking too out of place??

[jpetitte]

I'm giving this a try: https://developer.microsoft.com/en-us/fabric#/components/datepicker

[gustavonecore]

This one works ok, but the CSS are a mess...
https://github.com/Hacker0x01/react-datepicker/
So, I think is related...

[minotaurrr]

any updates on this yet?

[levithomason]

This component has little chance of making it. Many people want it, but not quite enough to finish it. I've locked the original issue as it is a frenzy of requests (and sometimes demands!) for updates and completion.

This project is not funded, but, it is open source! I would encourage the most interested and needy parties to fork the repo, pick up the work where it was last left off, and bring it to the finish line. You'd make a whole lot of people really happy 😄

[arfedulov]

Here i'm trying to implement above mentioned https://github.com/mdehoog/Semantic-UI-Calendar
using semantic-ui-react's elements. It's JQuery free. But not css free unfortunately. https://github.com/arfedulov/semantic-ui-calendar-react

[Charlicus]

I just created a css free, jquery free, responsive, react semantic datetime picker using momentjs for localization, no translation needed

Github repo

[linrongbin]

@Charlicus, looks like not support date-range selection?

[gaui]

@levithomason Since Stardust is underway and in collaboration with Microsoft Teams/Fabric teams and the Fabric team has already created a beautiful datepicker. Wouldn't it make sense to incorporate it into Stardust/SUIv2 and SUIv1?

[levithomason]

@gaui Indeed. There will be a date / time picker in Stardust. It is a little more difficult getting these things into Semantic UI React v1 because we don't own the CSS. That is owned by Semantic UI (jquery). We just consume the styles as CSS classes.

📖 Stardust, Fabric, and Semantic UI React

Stardust's primary objective is to bring framework agnostic standardization and convergence to UIs in the areas of design language, accessibility, styling, and state management. This will include tools and utilities for library authors. Stardust's React components exist only as an exemplar of a Stardust compliant UI.

Both Fabric and Semantic UI React will implement Stardust's standards and utilities. We are aiming for convergence in the future. It is a longer term goal, but we are working very actively on it. We meet in person twice a week to work toward this. It would be superb to one day be able to mix and match components from different libraries and give a high-quality and consistent experience to developers and end users.

There is a bigger story here that will be documented and presented by Stardust UI in the near future.

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[p3nGu1nZz]

bump

[javier-garderes]

I find it strange that this issue does not have a high priority on the backlog of items. Seems like a basic use case to cover?
Here's to hoping they bump the priority!

Edit - I'm using https://www.npmjs.com/package/semantic-ui-calendar-react for now, seems very nice! In case it helps somebody looking for an alternative these days.

[stale]

There has been no activity in this thread for 180 days. While we care about every issue and we’d love to see this fixed, the core team’s time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.

However, PRs for this issue will of course be accepted and welcome!

If there is no more activity in the next 180 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!

[aslafy-z]

Any news about that one?

[gregfenton]

I'm interested in a standardized date/time picker as well as a schedule component (i.e. a day-week-month view of schedule/calendar items).