A small Vue.js app

Dates and Moment.js

In Creating an object from stored data properties, I started storing “tiddlers”, or note-like objects, in an array called tiddlers.

I had my Vue app display the list of tiddlers as buttons in the UI, using the text property as the unique identifier. I want to change this, as more than one tiddler could have the same text. My plan is to use a timestamp for this instead.

Goal

Add a timestamp property to indicate the creation time of each new tiddler object.

Dealing with dates and times in JavaScript can be a lot of work; the moment.js library makes it a lot simpler. I’ll use it to generate the timestamps.

Breakdown

1. Load the Moment.js library
2. Modify the submitTiddler() method to create a timestamp and store it with the tiddler object
3. Format the date for readability
4. Use the created property as the key for listing tiddlers

1. Load the Moment.js library

Because I am using a single .js file to hold my simple Vue instance, loading it just means linking Moment.js with a <script> tag in an HTML file. For this Hugo website, I insert it into the Markdown file for the post, which is processed into an HTML file. HTML is allowed inside Markdown.

Using the jsDelivr content delivery network, I insert the following into the post’s Markdown file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>

Now my app, embedded in this post, can use the Moment library.

2. Modify the submitTiddler() method to create a timestamp and store it with the tiddler object

I choose to store my timestamp (created) in UTC, but to keep track of the offset of the system local time from UTC (utcOffset) so that the local created time can be calculated.

submitTiddler() {
  var created = moment().utc().format('YYYYMMDDHHmmssSSS')
  var utcOffset = moment().utcOffset()
  var newTiddler = {
    created: created,
    utcOffset: utcOffset,
    text: this.tempText,
    tags: this.tempTags
  }
  this.tiddlers.push(newTiddler)
  this.tempText = ''
  this.tempTags = []
}

Generating a timestamp in UTC is as simple as adding .utc() to moment(). I also want it to take the form of a string of numbers with no other characters, which is easily specified by stringing .format('YYYYMMDDHHmmssSSS') onto the end of it.The final SSS in the time format is milliseconds.

This should ensure that, if we use created time as a key for iterating over tiddlers, there are never duplicate keys to confuse things.

moment().utcOffset() gives the offset of local time from UTC in minutes.

created and utcOffset are now included among the properties of the newTiddler object and pushed onto the tiddlers array.

3. Format the date for readability

The format I chose for storage is not the one I want to read in my app’s UI. I’ll write the method localFromUTC() to take the created time and convert it to local time, then format it in a more readable way.

localFromUTC(tiddler) {
  var timeInt = moment.utc(tiddler.created, 'YYYYMMDDHHmmssSSS')
  var localInt = timeInt.add(tiddler.utcOffset,'minute')
  var localTime = localInt.format('YYYY-MM-DD, hh:mm a')
  return localTime
}

4. Use the created property as the key for listing tiddlers

For lack of a better option, I had used tiddler.text as the key for each tiddler in my v-for loop, but now that I have the timestamp down to the millisecond, I’ll use that instead. I am making the bet that no two tiddlers will be deliberately created within a millisecond of one another.

It may be worth considering some code to delete (or otherwise deal with) any tiddlers with duplicate created properties, but I won’t do that at this time.

<div class="tiddler-buttons" v-for="tiddler in this.tiddlers" v-bind:key="tiddler.created">
  <div class="tiddler-button-wrapper">
    <button class="button">{{tiddler.text}}</button>
  </div>
  <div class="tiddler-time">Created: {{localFromUTC(tiddler)}}</div>
</div>

I’ve also added a line to each tiddler’s entry in the “Tiddler list,” displaying its localFromUTC(), i.e. its readable, local created time.

Now, if you submit a tiddler or two, they appear at the right with their creation times displayed nicely below.