Date formatting with Moment from data

How-to Discussions
1

The view:

file

<Rectangle Height="1" Color="#888888" Margin="0,25,0,0" Opacity="0.2" />
<DockPanel Alignment="VerticalCenter">
    <Circle Dock="Left" Width="40" Height="40">
        <ImageFill Url="{portrait}" StretchMode="UniformToFill" />
    </Circle>
    <StackPanel Padding="16,0" Alignment="VerticalCenter">
        <MutedText Value="{author}" FontSize="14" Alignment="Left" />
        <MutedText Value="{published_at}" FontSize="12" Alignment="Left" />
    </StackPanel>
</DockPanel>
<MutedText Margin="0,20,0,0">Last Updated: {updated_at.date} by {editor}</MutedText>

How would I format the date in the data with Moment?

2

in your .uniproj file Include "js/moment.js:Bundle" then in your javascript

var Moment = require("js/moment.js");

Now it’s ready to use. You just need to generate the date values with moment library where it’s needed.

3

clay.chi wrote:

in your .uniproj file Include "js/moment.js:Bundle" then in your javascript

var Moment = require("js/moment.js");

Now it’s ready to use. You just need to generate the date values with moment library where it’s needed.

Is it possible to do that inline, or do I need to loop thru the data and change the data?

4

I believe it’s possible, still learning the UX markup. With trigger.actions and callback functions inside UX but common way to do, for example when you update/edit/create your article model, you can just generate the date in functions and store the data with it.

5

clay.chi wrote:

I believe it’s possible, still learning the UX markup. With trigger.actions and callback functions inside UX but common way to do, for example when you update/edit/create your article model, you can just generate the date in functions and store the data with it.

Currently this app is showing news, no editing or adding yet. So it is just viewing articles.

6

I could do it from the API end, but it would be best to do it in the app. Because of locales etc.

7

Daniel Billing wrote:

I could do it from the API end, but it would be best to do it in the app. Because of locales etc.

It sounds wrong. If each News needs a value of date property, it must be in served by the backend. After fetching the data by client, you will need to convert it to local time.

Edit: However either you add date property after you fetch data (assuming it’s a JSON) for each News item for mocked data purpose or you export a single date string for every News object for styling purpose i suppose.

8

clay.chi wrote:

Daniel Billing wrote:

I could do it from the API end, but it would be best to do it in the app. Because of locales etc.

It sounds wrong. If each News needs a value of date property, it must be in served by the backend. After fetching the data by client, you will need to convert it to local time.

Thats what I meant, but I guess i typed it wrong. Here is the data from the API:

"updated_at":{"date":"2016-02-06 15:14:35.000000","timezone_type":3,"timezone":"Europe\/Oslo"},

In the UX it just loops thru all the articles. How would I get the date to be converted after I have gathered it and sending it to the view?

9

Well, I guess your first post mislead me somewhere.

You can use a trigger action to activate to view and before you generate the view, you make it wait for fetch() to complete and make modifications in JSON then send it to view. I think there are some other ways to do it. Like (https://www.fusetools.com/docs/fuse/triggers/whiletrue) can make a view to wait for a condition with observables.

10

clay.chi wrote:

Well, I guess your first post mislead me somewhere.

You can use a trigger action to activate to view and before you generate the view, you make it wait for fetch() to complete and make modifications in JSON then send it to view.

Ok, I will try it out and post the results.

11

Daniel,

if you need further assistance on the subject, please post a complete, minimal reproduction that shows what you’ve tried so far. It’s impossible to help with just the snippets shown so far.

12

Uldis wrote:

Daniel,

if you need further assistance on the subject, please post a complete, minimal reproduction that shows what you’ve tried so far. It’s impossible to help with just the snippets shown so far.

I haven’t had the time yet.