Persist Angular UI Bootstrap Datepicker as string to API

Question

I'm using angular-ui-datepicker popup and I'm trying to persist the saved date value as a string with the date only. M/d/yyyy

The input after date selection is correct 5/11/2015 but the value stored is a Date

Mon May 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time) 12:00AM

Is there a way to always store the value as the date string and not as a Date object?

<p class="input-group">
    <input type="text" datepicker-popup="M/d/yyyy" ng-model="event.date"
        is-open="datePickers['date']" class="form-control" />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default"
            ng-click="toggleDatepicker('date', $event)">
            <i class="fa fa-calendar"></i>
        </button>
    </span>
</p>

In the above case I need the data to always be the date string, for instance:

{
   date: '5/11/2015'
}

and not

{
   date: `Mon May 11 2015 00:00:00 GMT-0400 (Eastern Daylight Time) 12:00AM`
}

I would do a custom directive and take advantage of ngModel $formatter to set the $modelValue equal to the $viewValue BUT not do a $render. Not tested, but this is what I'd try. See this SO question/answer: http://stackoverflow.com/questions/27491300/set-modelvalue-without-changing-viewvalue — jme11, May 11 '15 at 20:46
Hmm, I need to research more on Angular directives to achieve this it would seem. Any examples of a directive that manipulates the model without affecting how it renders? — hunter, May 11 '15 at 20:48

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

I don't think there's a simple (standard) JavaScript date formatting function, but I guess you could always build the M/d/yyyy string yourself using for example:

getDate() // Returns the date
getMonth() // Returns the month
getFullYear() // Returns the year

(more here)

I've also been messing around a bit with this myself on various projects and you might want to consider Date.toISOString. I've found that Angular will automatically deserialize ISO 8601 strings in JSON to an actual Date object for further use and vice versa it'll also serialize date objects to this format transparently, so you don't have to worry about this yourself.

edited May 23 '17 at 11:44

Community

1
1

answered May 11 '15 at 19:25

Fasermaler

943
6
14

I know how to format dates but I'm trying to do this automatically using the Angular UI Datepicker – hunter May 11 '15 at 19:35
@hunter Sorry, I see I was unclear but that's what I on about in the latter part of my post. I found that everything works peachy when using Date objects as the model value, so you'd only have to worry about persisting it as a string. It depends on what you mean by persisting, but if you are for example using $http to store/load from a server, it'll automatically convert to/from ISO8601 strings. So if you can live with using a Date object as your model (which seems to be what angular-ui-datepicker requires in the first place), everything should work out automatically already. – Fasermaler May 17 '15 at 10:16

Persist Angular UI Bootstrap Datepicker as string to API

1 Answers1