how to convert utc datetime to Fuzzy Time stamps

Question

I have a post action method which properly saves data into database along with date in utc date format. Now, i have a get method which fetches all the data from database in proper format like this:

  public JsonResult GetPosts()
    {
        var ret = (from post in db.Posts.ToList()
                   orderby post.PostedDate descending
                   select new
                   {
                       Message = post.Message,
                       PostedBy = post.PostedBy,
                       PostedByName = post.ApplicationUser.UserName,
                       PostedByAvatar = _GenerateAvatarUrlForUser(post.PostedBy),
                       PostedDate = post.PostedDate,
                       PostId = post.PostId,
                 });
        return Json(ret, JsonRequestBehavior.AllowGet);
    }

now, i have added getTimeAgo plugin from nuget packages and added to script folder. In my Scripts folder, i have a wallpost.js file which contains client side models for updating model and client side view model for updating UI automatically. here, i have a getTimeAgo function to get fuzzy time stamps from utc datetime. It is something like this:

   function getTimeAgo(varDate) {
if (varDate) {
    return $.timeago(varDate.toString().slice(-1) == 'Z' ? varDate : varDate + 'Z');
}
else {
    return '';
}

} But on the view page, its simply displaying NaNyearsAgo.As i have said earlier, date is saved in proper format in database but i am unable to convert utc date time to fuzzy time stamps. I have uploaded my entire wallpost.js file here for increasing brevity.http://pastebin.com/VVUuMScL On my View Page, I am showing post with user's image like this:

        <ul id="msgHolder" data-bind="foreach: posts">
<li class="postHolder">
    <img data-bind="attr: { src: PostedByAvatar }" width="150" height="200">

    <p><a data-bind="text: PostedByName"></a>: <span data-bind=" html: Message"></span></p>
    <div class="postFooter">
        <span class="timeago" data-bind="text: PostedDate"></span>&nbsp;<a class="linkComment" href="#" data-bind=" click: toggleComment">Comment</a>

    </div>
</li>

Please suggest me what is going wrong.

Use a decent library like [moment.js](http://momentjs.com/docs/#/displaying/fromnow/) — Cerbrus, Nov 19 '15 at 13:08
Try converting your PostedDate to a native Date and then just pass that to `timeago` http://jsfiddle.net/au8bq5jx/ — Roy J, Nov 19 '15 at 13:36
@RoyJ i didn't get where to convert posted date to native date ??? — duke, Nov 19 '15 at 17:36
@Cerbrus i dont have any idea of moment.js. i have just seen the website and some syntax of relative time was showing there. that something what i needed so how to use that after installing the package. Confusion is syntax are diff for year ago, for month ago , for one day ago. any example would be of great help to me — duke, Nov 19 '15 at 17:46
should i show u date saved in database or should i debug it and show u date returned to view model from database. I think may be it is format error @RoyJ — duke, Nov 20 '15 at 05:28

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

The problem is with the date format, and its parsing. You can use the moment.js library to

parse the UTC date: moment.utc(String),
and even to format in a format similar to fuzzy moment().fromNow()

So you can drop the fuzzy library, and start using moment.js.

Please, see also this answer related to moment.js timezone handling which can also affect you: how to handle date for posting purposes in the server

edited May 23 '17 at 12:15

Community

1
1

answered Nov 23 '15 at 11:24

JotaBe

38,030
8
98
117

thnx for the reply sir. i am not getting any intellisense for moment function on view page.I have added the reference at the bottom for moment.min.js. how should this line be formatted to use moment.js with it.I have removed timeago function and now, data should reach knockout view model in json format. change it like this //self.PostedDate = getTimeAgo(data.PostedDate); self.PostedDate = data.PostedDate; – duke Nov 24 '15 at 06:19
should it be something like this--- how to insert here knockout data-bind function – duke Nov 24 '15 at 07:49
thnxx for ur reply. i ahve resolved it myself. no need for moment js i will update solution soon – duke Nov 24 '15 at 08:52
Even if you yourself have found a way to do it, when dealing with dates and times that should be formatted and parsed for the user, I recommend keeping the "real value" in one observable, and use a different one to fomrta/parse the value. One way to go is by using extenders. Look for ko date or number extenders, and you'll see what I mean. If you don't feel like investigating extender, at least you can use writable computed observables to parse/format the value for the user, while keeping the standard value somewhere else. – JotaBe Nov 24 '15 at 08:56
okk thnk u sir i will definitely have a look at your suggestion – duke Nov 24 '15 at 09:13

how to convert utc datetime to Fuzzy Time stamps

1 Answers1