[UI] Date Picker

[comtom]

Please include a datepicker component. If you have no idea what I'm saying, please see this link http://jqueryui.com/datepicker/

[h2u]

Yea, datepicker and timepicker would be great. Timepicker example: http://jdewit.github.io/bootstrap-timepicker/

[comtom]

Maybe the best solution is integrating both components, like this one: http://tarruda.github.io/bootstrap-datetimepicker/

[lionel-m]

Maybe the best solution is integrating both components

:+1:

[jlukic]

Issue #87

We have one roadmapped

[deneuxa]

Issue https://github.com/jlukic/Semantic-UI/issues/50

[jlukic]

I'll leave this as the official issue

[mibamur]

!!! No, no boostrap, no jquery !!!

look at http://chipersoft.com/Kalendae/ and http://www.momentjs.com/

[soundake]

I`m using slightly modified DatePicker for Bootstrap (http://www.malot.fr/bootstrap-datetimepicker/index.php)

It`s nice.

[deneuxa]

Hello, and thanks for the link, Could you share your modifications ?

2013/12/18 soundake notifications@github.com

I`m using slightly modified DatePicker for Bootstrap ( http://www.malot.fr/bootstrap-datetimepicker/index.php) [image: screen shot 2013-12-18 at 11 42 23]https://f.cloud.github.com/assets/116968/1772463/c4183bd8-67d1-11e3-8730-2c9dae6c3506.png

It`s nice.

— Reply to this email directly or view it on GitHubhttps://github.com/Semantic-Org/Semantic-UI/issues/191#issuecomment-30832223 .

[sstok]

I found this one yesterday http://amsul.ca/pickadate.js/ And it works perfect on a tablet.

[changalberto]

1+ http://amsul.ca/pickadate.js/

[5night]

This one is pretty delicious. http://rtsinani.github.io/jquery-datepicker-skins/

[comtom]

@soundake 's component seems to be very nice. Can you share its code please?

[deneuxa]

@comtom, @soundake gently shared his code; I adapted it a little. If you want to use datetimepick JS you juste have to load it and override the css by this : https://gist.github.com/deneuxa/179f5bfe68e0f144ba3a

[comtom]

Awesome! Thanks @deneuxa , @soundake

[Anachron]

:+1: for a datepicker like http://www.malot.fr/bootstrap-datetimepicker/index.php in Semantic-UI

[jlukic]

That is the best date picker I've seen yet. I've wanted to do this, but the time to write compared to other components is steep, and there's a lot of backlog for me.

[deneuxa]

This one is pretty cool too :) https://github.com/xdan/datetimepicker

[saden1]

+1 for adding date picker, time picker, and date+time picker components.

[abykurien]

This one looks good. http://amsul.ca/pickadate.js/

[stephnr]

Hi all! UI/UX Designer and Developer here, I would love to design a new and simple calender component for everyone here. To confirm, we are saying non jQuery, Bootstrap, etc? It has to be pure HTML, CSS, JS?

[deneuxa]

IT would be awesome, but please think about the UX for : time only date only date and time combined

of course no Bootstrap, you're on the bootstrap-killer repo ;)

[stephnr]

haha ;) sounds great. I will draw up some mockups today! In regards to design decision, I assume these are the goals:

1. Clean and effective delivery
2. Smooth open and close
3. Subtle animations
4. Design Driven Data

[deneuxa]

Yeah I'll add

5. mobile / tablet / responsive compatibility

[stephnr]

Just a few things to note when you visit:

1. Overall, I am pretty confident with the design (simple, clean, effective delivery)
2. The place I need help with is the backend. There should be functionality to coordinate the dates appropriately given the year and month (i.e. January 1st, 2014 is on a Wednesday, not a Sunday)
3. I am open to all sorts of criticism

4. I would prefer that I am given credit for the UI/UX, anyone can take credit for the mechanics

EDIT: ^^^ Theres a bounty to be made :wink:

Heres some functionality thats needs to be written:

• [ ] Clicking on a day should populate the input field with the data
• [ ] All the HTML Content should load via some script versus manually writing it all
• [ ] Toggling the calender (open and close) via the calender button
• [ ] Switching between months

[deneuxa]

I was thinking datetime selector, not only date :)

[stephnr]

Isnt that what I designed? Unless you had a different component in mind.

[deneuxa]

I only see this, I can't see time picking , only date, when I click on a date, nothing happen

[comtom]

It would be great to have:

• year selection
• min and max dates (if setted, you can only select between that range)
• multiple date selection
• custom output format (aaaammdd, mm/dd/aaaa, dd/mm/aaaa, etc)

@deneuxa I belive there's no JS in the codepen link shared before.

[deneuxa]

@comtom yeah did you see this one :) http://www.malot.fr/bootstrap-datetimepicker/index.php, I adapted it for SUI

but I think the UX coud be better

[comtom]

@deneuxa sure, I've used it before. But I think we can do a better and solid component, that we can reuse in other projects :).

[stephnr]

Let me clear up a few things:

1. This is just for Date picking so far
2. If we are talking about time picking, that would require an entirely different component. From a UX standpoint, putting both together is not good practice.
3. I did specify that this was purely design and not fully functioning. I do have other priorities to fulfill so completing the backend would take myself some time. Hence why I requested the collaborators here to contribute.

Next time, please read my comments in full.

[stephnr]

@deneuxa , I just checked out the bootstrap date-time picker that you linked. Its beautiful and that was the intended end result. I say we focus on that kind of functionality for the end result

[comtom]

@deneuxa @Stephn-R It's great indeed. But it lacks a configuration for displaying only date selection or only time selection. Beside that, it's great

[deneuxa]

@comtom yes you can, you have to set minView: 2, maxView: 3 => only date picking. You can do the same with time picking.

But I don't really like the timepicking UX : users are a bit confused with it (I use it on a large-audience website).

I though about switching to http://amsul.ca/pickadate.js/ but stayed datetimepicker because it was easier to maintain one single field for both date and time datas.

I think a good UX would be to adapt http://amsul.ca/pickadate.js/ with two rolls: one for hour one for minutes (iphone like )

[stephnr]

ok so, can we get a list down for the full functionality? I think it would be great to have it where the class dictates which component gets rendered.

1. Date is just date selector a. Can further select how many levels via some class (i.e. Levels can be Decade, Year, Month, Day, Hour)
2. Time is just time selector
3. What should we say for both?

My goal is to mimic the functionality of http://www.malot.fr/bootstrap-datetimepicker/index.php

[kvetoslavnovak]

Is there anything new? I thought that version 1.0 will have this feature. Thank you for your answer.

[stephnr]

It looks like this is planned for Semantic-UI 2.0

[ghost]

It is currently the most voted UI feature on trello, should be tagged as High priority IMO. Really missing this component.

[deneuxa]

Yes you can ;)

Le 6 juil. 2014 à 20:43, Tomás notifications@github.com a écrit :

@deneuxa @Stephn-R It's great indeed. But it lacks a configuration for displaying only date selection or only time selection. Beside that, it's great

— Reply to this email directly or view it on GitHub.

[stephnr]

@LemonQ can you provide me with a link to this. If it is in high priority, I can try to shuffle some things around to put more time into this.

[kevinwarren]

Just to throw a curve ball! I prefer this datetimepicker http://eonasdan.github.io/bootstrap-datetimepicker/ to the ones suggested. It also has heaps on config options including: date, time & datetime, date formats, language, etc

Would be great if a semantic-ui datetimepicker could be developed based on this.

I also don't think datetime is bad practice. In a database the best format to use (at least in MySQL & in my personal opinion) is timestamp which stores both date & time. Why would I want to split the input into 2 fields when I can capture it in 1?

Anyway keep up the good work. Semantic-UI is awesome. :-)

[kvetoslavnovak]

This one seems as a really great example.

[kvetoslavnovak]

First of all thank for your hard and excelent work! Is there anything new reagarding date picker and calendar? Can we expect it with 2.0 release?

[cazzoo]

@kvetoslavnovak Don't know yet the status but I implemented http://xdsoft.net/jqplugins/datetimepicker/ and it's working pretty well. Too bad that data attributes does not work with this plugin

[nhodges]

I have begun work on this in pull request #2169, you can preview the current progress in this CodePen:

http://codepen.io/nuri/pen/yNLZOd

[deneuxa]

it seems to be empty ?

2015-04-24 10:05 GMT+02:00 Nuri Hodges notifications@github.com:

I have begun work on this in pull request #2169 https://github.com/Semantic-Org/Semantic-UI/pull/2169, you can preview the current progress in this CodePen:

http://codepen.io/nuri/pen/yNLZOd

— Reply to this email directly or view it on GitHub https://github.com/Semantic-Org/Semantic-UI/issues/191#issuecomment-95844027 .

[nhodges]

@deneuxa

Hmm, just checked in an incognito window and the CodePen is working, do you get a JS error or anything?

[lholznagel]

The Link is working for me, and I must say it looks awesome

[listepo]

What the status of this module?