Building the date function help

JavaScript
1

Hi all,

Having a small issue trying to build a new function with another date function converter inside it.

The below snippet works tested in the console:

var current = '2018-02-22T12:00:00';
var today = new Date(current);
var format = "DD-MM-YYYY";
console.log(dateConvert(today,format));

22-02-2018

The dateConvert function is a generic date converter used for the heavy lifting, taken from a [sitepoint article] (https://www.sitepoint.com/beginners-guide-to-javascript-date-and-time/) for anybody interested.

The function I’m trying to build

'formatDate': function () {
    var format = "DD-MM-YYYY";
    
    return function (today, render) {
      var today = new Date(today);
      return '<b>' + render(dateConvert(today,format)) + '</b>'
    }
  },

Now when I run this function:

aN-aN-NaN

Not sure what I have missed, any ideas why I’m seeing aN-aN-NaN and not the converted date?

Thanks,
Barry

2

How are you calling it?

3

Thanks @chrisofarabia

I’m continuing from a previous thread using the Mustache template engine.

Generally called as below:

{{#formatDate}}
 {{submitted}}
{{/formatDate}}

"submitted": "2018-03-06T12:01:00"

Barry

4

Log to the console the today variable, both when it’s passed to the function and when you update it.

5

If this is what you mean?

return function (today, render) {
      console.log(today);
      var today = new Date(today);
      console.log(today);
      return '<b>' + render(dateConvert(today,format)) + '</b>'
    }

In order from the console:

{{submitted}}
Invalid Date

Barry

6

Shouldn’t it be 2018-02-22T12:00:00 for the today variable?

Also, in the dateConvert() function I see that it uses a switch case for the formats, and the format that you give it isn’t handled by the function.

7

When the page loads and the template is executed yes, this is the function I have so when {{submitted}} is rendered the date will be there - I have well over 20+ {{submitted}} dates that are converted.

I’ve modified dateConvert()
I generally took the skeleton to work with and slightly customised it for this instance.
DD-MM-YYYY is one of the cases.

Barry

8

[quote=“computerbarry, post:7, topic:294435, full:true”]
When the page loads and the template is executed yes, this is the function I have so when {{submitted}} is rendered the date will be there - I have well over 20+ {{submitted}} dates that are converted.[/quote]

But didn’t your console.log show that when the function was executed, that it didn’t get the correct today value?

9

Arh, yes your right.

Though if I remove the {{#formatDate}}{{/formatDate}}
And execute {{submitted}} on its own, the date is printed ok.

So instead of

aN-aN-NaN

I see

2018-03-06T12:01:00

Hence me trying to build the converter :slight_smile:
Barry

10

I’ve fixed it! :grinning:

I think what the issue was is when using this sort of function within Mustache, we need to pass the type of object being processed, if that’s correct. Maybe I’m wrong and it’s something else?

Example:

When working with numbers (number)

'double': function () {
    return function (number, render) {
      return render(number) * 2;
    }
  }

When working with strings (text)

'wrapped': function () {
    return function (text, render) {
      return '<b>' + render(text) + '</b>'
    }
  }

And our function, even though this is a date, its a string (text)

'formatDate': function () {
    var format = "DD-MM-YYYY"; 
    
    return function (text, render) {
      var text = new Date(today);
      return '<b>' + render(dateConvert(today,format)) + '</b>'
    }
  },

I’m now seeing the date rendered as:

22-02-2018

Which has me thinking, how exactly are the today and text variable working together?
And what I mentioned above, does this make sense, meaning, it’s correct?

Thanks,
Barry

11

False alarm @Paul_Wilkins :expressionless:

I’ve just realised every item is printing the same date.

This is because of the early console variables I was testing:

var current = '2018-02-22T12:00:00';
var today = new Date(current);

Once I remove these I now get the error:

ReferenceError: today is not defined

'formatDate': function () {
    var format = "DD-MM-YYYY"; 
    
    return function (text, render) {
      var text = new Date(today);
      return '<b>' + render(dateConvert(today,format)) + '</b>'
    }
  },

If I change it to

'formatDate': function () {
    var format = "DD-MM-YYYY"; 
    
    return function (text, render) {
      var text = new Date(text);
      return '<b>' + render(dateConvert(text,format)) + '</b>'
    }
  },

Back to square one.

aN-aN-NaN

Barry

12

This seems to be a good time for me to try and simulate your environment.

Get a simple version working

Based on the Mustache functions documented example, here’s a jsfiddle example https://jsfiddle.net/b6ygoyw8/

where the HTML code is:

<div id="target">Loading...</div>
<script id="template" type="x-tmpl-mustache">
{{#formatDate}}
 {{submitted}}
{{/formatDate}}
</script>

and the scripting code is:

var template = $('#template').html();
Mustache.parse(template);  // optional, speeds up future uses
var rendered = Mustache.render(template, {
  submitted: "2018-03-06T12:01:00",
  formatDate: function () {
    return function (text, render) {
      return render(text);
      // var today = new Date(today);
      // return '<b>' + render(dateConvert(today,format)) + '</b>'
    };
  }
});
$('#target').html(rendered);

The text variable is the unrendered content, so after rendering you have the submitted date.

Can we pass the render to Date?

You want to then further process that rendered date before returning it from the function.

return new Date(render(text));

But there’s a problem, for the rendered text includes the whitespace formatting too.
Render is not a solution here.

Update this.submitted instead

Instead, I think that you need to update the this.submitted value and then return the render.

    return function (text, render) {
      this.submitted = new Date(this.submitted);
      return render(text);
      // return '<b>' + render(dateConvert(today,format)) + '</b>'
    };

That’s successful at https://jsfiddle.net/b6ygoyw8/1 and now shows:

Tue Mar 06 2018 12:01:00 GMT+1300 (New Zealand Daylight Time)

Use dateConvert

We just need to format it appropriately now, which is achieved with the dateConvert function.

    return function (text, render) {
      this.submitted = dateConvert(new Date(this.submitted));
      return '<b>' + render(text) + '</b>';
    };

And we now have dateConvert going at https://jsfiddle.net/b6ygoyw8/2/

Formatting dateConvert

It’s just a matter of tidying up and giving an appropriate format for the dateConvert function now.

  formatDate: function () {
    var format = "DD-MM-YYYY";
    return function (text, render) {
      this.submitted = dateConvert(new Date(this.submitted), format);
      ...

And we now have a working example at https://jsfiddle.net/b6ygoyw8/3/

1 Like
13

I now feel confident about my Mustache knowledge to answer previous questions.

The function parameters never change with Mustache, it’s always text, render that are used, where text is the unrendered content, and the render function is the Mustache code that converts the unrendered content into the final output.

That was because the today variable was the unrendered text, and wasn’t the submitted date.

1 Like
14

I’ve been working on this since Friday :grin::grinning:
Thanks a lot @Paul_Wilkins !

Change my day into a productive one :sunny:

I’ll digest the information, I think I now understand what the issue was after you have explained, thanks for the detailed information, really helps.

And you’ve now learnt some new yourself - Mustache :nerd:

Cheers, Barry

1 Like
15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.