[scope] date format on calendar component

[batata004]

Hi,

The calendar component is awesome however I am having a hard time dealing with different date formats. In Brazil, the default date format is day (2 digits) / month (2 digits) / year (4 digits). Fomantic UI makes it pretty easy to change the format, I just need to use:

    formatter:{

        date:'DD/MM/YYYY'

    },

It works great. However when I set the date with JS using set date or when I use the HTML attribute data-date, if I use the date in brazilian format, the component gets crazy (it outputs dates with month/day switched)... So I ask you this: when using the formatter it only applies to what the user sees visibly in the input and I should use the american format (yyyy-mm-dd) when using using set date with JS or when setting the HTML attribute data-date?

I think it would be better for this component to honor the format the user specified in the formatter in such a way that all the other configurations/parameters passed to the calender component should be treated as if in the format specified in the formatter. If this is no the case, the programmer has to deal with at least 2 different date formats all the time: one for the user visually and another for dealing with the component. Or am I saying something wrong?

I think at least the documentation should specificy the date format that the user has to use to deal with the component, I cant find it nowhere saying that should be YYYY-MM-DD.

[lubber-de]

try to use monthFirst: false See https://jsfiddle.net/lubber/oLutpay9/4/

The formatter option is infact only used to format the output wherever the date is shown somewhere in the component. While it seems logical at first to also use the formatter string as input format, it could get quite complex as the formatter tokens support much more than just Y,M,D (see https://fomantic-ui.com/modules/calendar.html#custom-format)

The default date parser is already very complex and tries its best to get a given date string being parsed correctly If the above suggested init option monthFirst (which the default parser supports) does not work for you, you are also able to provide your own date parser function like this

$('.ui.calendar').calendar({
    parser: {
        date: function(text) {
                if (text instanceof Date) {
                    return text;
                }
// always assume DD/MM/YYYY
                var day = text.substr(0,2),
                    month = text.substr(3,2),
                    year = text.substr(6,4);
                return new Date(year, month - 1, day, 0, 0);
        }
    }
});