Calendar module

[mdehoog]

I've created a Calendar (date/time picker) module. It depends on the Popup module and Table collection.

For examples, see here: https://jsbin.com/hubanufuva/

Let me know if there's things that can be improved or changed to fit better into the project.

Issue for reference: #191.

EDIT: implemented time picker.

EDIT 2: See this repository for a ready to install version: https://github.com/mdehoog/Semantic-UI-Calendar.

[brunotourinho]

first of all, thanks for sharing!
where can I download it?

can you extend the module to have month and year selection?
something like this one does: http://www.eyecon.ro/datepicker/

[brunotourinho]

@mdehoog i've downloaded from jsbin source, but got and error:

Calendar: No activator found for the calendar popup
f.error @ semantic.min.js:12
f.setup.popup @ semantic.min.js:12
f.initialize @ semantic.min.js:12
(anonymous function) @ semantic.min.js:12
jQuery.extend.each @ jquery-1.10.2.js:671
jQuery.fn.jQuery.each @ jquery-1.10.2.js:280
e.fn.calendar @ semantic.min.js:11
(anonymous function) @ Editar?IDMaterial=961&Page=0:85 

in my case, the date in the field is already filled, is there a date format config like 'dd/MM/yyyy'?

[mdehoog]

@brunotourinho You need an element that acts as the popup activator, ie an input or a button as a child element of the ui calendar element.

I've just committed a change that causes the calendar to automatically switch to inline mode if no activator element is found (instead of throwing the error).

[lholznagel]

It looks very nice. 👍
It would be awesome if you add a timepicker :)

[cazzoo]

👍 timepicker would be really neat addition to this cleany made datepicker

[mdehoog]

@brunotourinho Added year/month selection like the example given.
@cazzoo @KapuzenSohn Added timepicker.

[lholznagel]

@mdehoog Thanks!

[brunotourinho]

@mdehoog Awesome!!!
I'm from Brazil, so I have to ask you for localization config on the date format (short date) when date is selected as well when the field is already filled (editing mode), the default setting is "October 29, 2015" we should be able to change it to something like 10/29/2015 (mm/dd/yyyy for en-us) or 29/10/2015 (dd/MM/yyy for pt-br)

I cant wait to use it in production, one more time, thanks a lot! 😄

[mdehoog]

@brunotourinho Check out the "Day first" and "Custom format" examples in the linked jsbin.

[brunotourinho]

@mdehoog that's Perfect!

[brunotourinho]

@mdehoog When the field is set (editing mode) and we open the popup but don't select a date, when it closes, it resets the value to the placeholder value.

[brunotourinho]

@mdehoog another cool stuff, would be the option to change the month name and weekdays letters localization.
i.e. October (default en-us) -> Outubro (pt-br) and 'S/M/T/W/T/F/S' (default en-us) -> 'D/S/T/Q/Q/S/S' (pt-br)

[brunotourinho]

Unminified the code and found the answer for my second question:

text: { days: ["S", "M", "T", "W", "T", "F", "S"], months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], today: "Today", now: "Now", am: "AM", pm: "PM" }
😄

[cazzoo]

I like it!!
Perfect addition

[mdehoog]

@brunotourinho Can't reproduce the "reset to placeholder" issue, can you provide a jsbin?
PS Instead of unminifying the jsbin source, you can see the module code in the "Files changed" tab at the top of this PR, or you can view the Calendar module in the PR's source fork: https://github.com/mdehoog/Semantic-UI/tree/calendar/src/definitions/modules.

[brunotourinho]

@mdehoog, I'll try to explain the steps, the jsbin is here https://jsbin.com/mopugunafo/1/edit?html,js,output:

• I have a calendar with the value set
• I Click on the input, to open the pop up (don't chose any date)
• Click outside the input (to close the pop up)
• It goes back to default

Maybe I'm having trouble setting the initial date.
is setting the 'value' property of the input the right way to work?

[mdehoog]

@brunotourinho Excellent, thanks for the jsbin! Bug fixed (jsbin in original post updated).

[danitz]

Hi Everyone,

I noticed an issue when placing the calendar inside a modal box, after the modal shows up the calendar automatically showing up too not waiting for the input box clicked first.

I created a jsfiddle on this

https://jsfiddle.net/danitz/Lxdsbhcu/

any help is very much appreciated

[hinterlist]

@danitz that would happen with any input component inside modal window. You need to set autofocus: false when initializing your modal window.

http://semantic-ui.com/modules/modal.html#/settings

[smartm0use]

@danitz I have already reported this bug some months ago. Please read my comment: #3256 (comment)

It is still a bug.

[danitz]

@DimitryKislichenko thanks a lot it works

[Siriwatb]

Hi !
I need help . I want to change AD Year to BE Year

example : 2017 to 2560

[talha-asad]

@mdehoog

Calendar doesn't restores value when using Semantic UI's form API, e.g $('form.form').form('set values', {start_date: new Date()});

It does restore the input text value but not the actual hidden input value.

Additionally when a date is set it won't trigger a change event on the form, which happens with all other components.

[smartm0use]

@talha-asad You should add an issue here

[JoelTwilo]

Hi, I'm having a problem with the calendar. I'm using it as a date range picker but if I select a date in the first calendar it doesn't block out the date in the second calendar.

How would I achieve this behavior?

[smartm0use]

Have you followed the example?

$('#rangestart').calendar({
   type: 'date',
   endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
  type: 'date',
  startCalendar: $('#rangestart')
});

Anyway you should use this repository to get support.

[diego1905]

Hello,

Is there a way to only disable all Sundays (make it disabled link) from being selected in inline calendar ?

Thanks

[kevinrjn]

Hi everyone, can someone tell me please how to use the formatter "cell" ? I've tried many ways but I always get an error. Thanks

[louwers]

Has it been definitively decided that Semantic UI will not contain a date picker?

[smartm0use]

Yes.

[brownsugar]

Really nice plugin, hope this will officially included in Semantic UI soon.

[MariannaAtPlay]

@smartm0use why???

[awgv]

@MariannaAtPlay Jack said nothing about it, someone asked to close the PR and move it to a separate repository—that’s it. The component will or will not be added to the core.

[ctilley83]

@Banandrew It seems like Jack was willing and excited about this pull request if you read above. I'm sure when Jack returns to actively developing Semantic Ui, this discussion will resume. All modern css/component frameworks have a calendar module. Semantic UI should be no different. The issue that arises is from the uncertainty of this project's future. It's a great framework, but Jack has mentioned himself that currently he has zero time to work on this project. He says he'll return to the project, but that was a year ago. The "when" question is killing this project.

[rkrameshkumar71]

hi mdehoog,
last one week i am trying to implement semantic calendar like below link can you help me. i want to disable past dates in semantic calender.

http://jsfiddle.net/nicolapeluchetti/dAyzq/1/

[rkrameshkumar71]

https://jsfiddle.net/rkrameshkumar71/2Lu8hjrb/

[GuacheSuede]

#6109

[contactjavas]

Perhaps this component can be built in instead of becoming an extension

[brunotourinho]

Hey @lubber-de ,
Can you take a look on issue #3287
Maybe we can implement this on FUI.

[rsad1351]

Hi
Could you add Jalali calendar as an option?