How to display datetime in the format with seconds?

[ghost]

Help Wanted

I want the user can only choose date type calendar, and the displaying in the input is in the format like 2019-12-12 08:02:34 (the time user clicked the calendar)

        date: {
            type: 'date',
            text: {
                ...
            },
            formatter: {
                date: function(date, settings) {
                    if (!date) {
                        return '';
                    }
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    let hour = date.getHours();
                    let minute = date.getMinutes();
                    let second = date.getSeconds();
                    let s = `${year}/${month}/${day} ${hour}:${minute}:${second}`
                    return s;
                }
            }
        }
    }

Problem

Let's say i clicked the calendar in today at 08:02:34. the calendar should display 2019/12/12 08:02:34, but it shows 2019/12/12 8:2:0

[jamessampford]

I didn't think the calendar had an option to pick seconds - but you can output it with seconds as you like. Looking above, it seems all you really need to do is check if the minute or second is less than 10 and pre-pend a zero to that, ie.

let minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();

[ghost]

@jamessampford thanks a lot.
Finally, my solution is

{
    ...
    formatInput: false,
    formatter: {
        date: function(date, settings) {
            if (!date) {
                return '';
            }
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            month = month < 10 ? `0${month}` : month;
            let day = date.getDate();
            day = day < 10 ? `0${day}` : day;

            let hour = date.getHours();
            hour = hour < 10 ? `0${hour}` : hour;
            let minute = date.getMinutes();
            minute = minute < 10 ? `0${minute}` : minute;
            let second = new Date().getSeconds();
            second = second < 10 ? `0${second}` : second;

            let s = `${year}/${month}/${day} ${hour}:${minute}:${second}`;
            return s;
        }
    }
};

When i leave the calendar, it change the seconds number. So i add the formatInput: false.then it works fine, but i suggest that the calendar should provide an option to pick seconds and show the pre-zero.

Anyway, thanks for your reply.

[vrialland]

Hi,

if you don't mind having one more lib in your project, you can probably use moment.js for this, e.g.

let date = new Date()
moment(date).format('L LTS')

Bonus: it handles the localization of the date and time too 🙂

[ghost]

@vrialland Thanks for reply!
It's a simple solution!
I heard about moment.js, but never use it. Next time, i'll try it.

[exoego]

I think formatting date is not a direct issue of Fomantic UI but a JS-issue.
Thanks for providing a solution to format date by JS function or moment.js.
Closing since a solution provided.

[lubber-de]

token string dateformat now supported by #2324 which also allows to show seconds via s or ss tokens