asked on

How can I format this date?

Here's the code:I'm working on:

function bindTimeLine(targetElement, data) {
        $('#' + targetElement).html('Processing...');
        if (typeof data != 'undefined') {
            if (data.length > 0) {
                let html = '';
                data.forEach((row) => {
                    let timelineMonth = '<div class="timeline-month" title="' + row._id + '">' +
                        '<div class="timeline-time-view" >' +
                        '<div class="timeline-time-view-inner" title="' + row._id + '">' +
                        '<div class="left-view-time"> <span> ' + row.prettyDate + '</span> <span>' + row.activities.length + ' Entries</span></div> ' +
                        '</div>' +

                        '</div>' +
                        '</div>'
                        //'<div style="height:78px;"></div>'
                        ;
                    let timelineSection = '', timelineIndex = 0;
                    row.activities.forEach((activity) => {
                        let activityMeta = '';
                        timelineIndex = row._id+'-'+( timelineIndex + 1);
                        for (var key in activity.meta) {
                            let val = activity.meta[key];
							if(key=='date')
							{
								activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + "I want to format the date" + '</span></div>';	
							}
							else {
								activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + val + '</span></div>';	
							}
                        }

Open in new window

Here's how this looks on the app:

I want to change the format of the date that you see in the screenshot (I've got it highlighted in a box).

The last four lines of the code that you see above is my attempt to isolate the date and then - here's where I'm stuck - I need to format the date so it's mm/dd/YYYY.

How?

Sam Jacobs

If your date is in the string variable myDate, you can use:

var formattedDate = myDate.substring(5,7)+'/'+myDate.substring(8,10)+'/'+myDate.substring(0,4);

Open in new window

leakim971

reference : https://developer.mozilla.org/docs/Web/JavaScript/Reference/Objets_globaux/DateTimeFormat

for (var key in activity.meta) {
    let val = activity.meta[key];
    if(key=='date')
    {
        val = new Intl.DateTimeFormat('en-US',{month:"2-digit",day:"2-digit",year:"numeric"}).format(val);
        activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + val + '</span></div>';
    }
    else {
        activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + val + '</span></div>';
    }
}

Open in new window

or :

for (var key in activity.meta) {
    let val = (key !='date') ? activity.meta[key] : new Intl.DateTimeFormat('en-US',{month:"2-digit",day:"2-digit",year:"numeric"}).format(activity.meta[key]);
    activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + val + '</span></div>';
}

Open in new window

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Bruce Gust

ASKER

Chris, I do have "moment!" I've seen it in the code and I was able to find the package in the "node_modules" directory.

I'm still google-ing this thing, but here's what I tried:

[code]let val = activity.meta[key];
if(key=='date')
{
let formattedDate = moment(val)->format('MM/DD/YYYY');
activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + formattedDate + '</span></div>';
}
else {
activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + val + '</span></div>';
}[/code]

Got an error back that said, "Uncaught SyntaxError: Unexpected token '>'" referring to " let formattedDate = moment(val)->format('MM/DD/YYYY');"

How do I implement this thing?

BTW: Thanks for the suggestion. This looks like a far easier solution to implement.

Bruce Gust

ASKER

Never mind, Chris!

I got it!

Here's what I did:

if(key=='date')
                     {
                        let val = moment();
                        let formattedDate = val.format("MMMM Do, YYYY");
                        activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + formattedDate + '</span></div>';   
                     }
                     else {
                        activityMeta = activityMeta + '<div class="box-item"><strong>' + key + '</strong>:<span>' + val + '</span></div>';   
                     }

Open in new window

Let me know if that resonates with you as a healthy implementation or if there's something stronger / better that I could do.

Thanks!

Bruce Gust

ASKER

Thanks, folks!

Chris Stanyon

Hey Bruce,

Sorry - typo in my original comment - had my PHP hat on, so used -> object notations instead of the period !!

In the code that you've used, you're not actually passing any info into the moment() ctor, so you're just going to get today's date. You should pass in the value you need to work with.

BONUS TIP : use a Ternary Operator and String Interpolation - it might make things a little easier to read:

for (var key in activity.meta) {
    let val = key == 'date' ? moment(activity.meta[key]).format('MMMM Do, YYYY') : activity.meta[key]
    activityMeta += `<div class="box-item"><strong>${key}</strong>:<span>${val}</span></div>`
}

Open in new window