Fomantic-ui: calendar format

[Hokwang]

Feature Request

some calendar improvements for users

1. format
2. maxDate
3. show year

Description

1. I think supporting very basic format like 'yy-mm-dd' is better.
   I think you can reference jqueryui's datepicker (https://jqueryui.com/datepicker/#date-formats).
   Please look around.

Now I am writing codes like,

                       // calendar fn
            function calendar_format_date(date) {
                if ( ! date ) return '';
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                if ( month < 10 ) month = '0' + month;
                var day = date.getDate();
                if ( day < 10 ) day = '0' + day;
                return [year, month, day].join('-');
            }

            // from
            var today = new Date();
            $("#from").calendar({
                type: 'date',
                endCalendar: $('#to'),
                maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
                formatter: {
                    date: function (date, settings) {
                        return calendar_format_date(date);
                    }
                }
            });

and in api also painfully ,

$('.ui.form').form({}).api({
                action: 'blah blah',
                method: 'POST',
                beforeSend: function(settings) {
                    settings.data.from = calendar_format_date($('#from').calendar('get date'));
<snip>

In jqueryui, format is

$( ".selector" ).datepicker({
  dateFormat: "yy-mm-dd"
});

and get date is

var currentDate = $( ".selector" ).datepicker( "getDate" );

1. maxDate is also difficult. See maxDate in jqueryui,

$( ".selector" ).datepicker({
  maxDate: "+1m +1w"
});

1. I want to change year. think about you want to select +1 year after, you should click 12 times.
   Just for example, https://demo.mobiscroll.com/javascript/calendar/date-picker#

[jamessampford]

Point 1 and 2 may be solved by using 3rd party libraries like Moment (https://momentjs.com/)

Point 3, you can already click on the "Month Year" at the top (ie. March 2019), go forward a year, then pick the month you need (3 clicks) - I think this is similar to how other calendars work and possibly easier to use when jumping around a lot. Perhaps an alternative layout could be used as well as the current layout, giving everyone flexibility

[Hokwang]

@jamessampford Yes, there are so many plugins(libraries) in the world. User can add something and more and more.
But I think it is important to make you feel that users can do everything fomantic(semantic)ui.js alone.
I wish you could make users feel comfortable.

[lubber-de]

@Hokwang We will think about adding a very lightweight dateFormat functionality to accomplish this task. Stay tuned 🙂

[VanquishedWombat]

If I could add, the momentjs library is very capable and powerful but you would not want users to have to adopt it for simple utility as per a lightweight dateformat capability. The sweet spot is straightforward functionality with enough capability for everyday use-cases, then leaving the way open for the developer to bring in other libs for more complex cases. Please do not make a dependency on another lib though, as that leads to dependency paralysis.

[paulvales]

Maybe make 2 version ? WIth momentjs and simple Fomantic-UI Datepicker

[bornemisza]

@lubber-de Any news about dateFormat? :)

[lubber-de]

@lubber-de Any news about dateFormat? :)

Not yet done, still on the large todo list