Angular bootstrap datepicker - how to set date explicitly?

Question

The Angularjs Bootstrap datepicker is amazing. But I face a problem when I try to select the date by javascript. For example, If read this data from a particular object, 4/5/1990, how can I make the datepicker selected date as that date: 4/5/1990 ?

Hint: I need this when I make data available for user for edit.

Take a look at my current code:

HTML

<input type="text" class="form-control" ng-model="Birthdate" id="Birthdate" name="Birthdate" required autocomplete="on" datepicker-popup="dd/MM/yyyy" is-open="opened" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
                               ng-required="true" close-text="Close" placeholder="Enter Birthdate"  />

js

$scope.Birthdate = $scope.users[id].Birthdate;

But the selected date appears in two cases:

First case: In case the date is 4/5/1986, it swap day and month of the date format. i.e: 4/5/1990 ---becomes---> 5/4/1990

Second case: no date is selected in case of this date: 28/5/1986

Please help me to select the date in the datepicker as I read it from the object, if it is 4/51990, the datepicker selected date should be exactly that date with no mess. And in case I have this date 28/5/1986, the datepicker should stick/be selecting that date.

So what format are you getting the data to bind as if you're editing it? YYYY-MM-DD? And which are you trying to display? MM/DD/YYYY or DD/MM/YYYY? — Jeremy Jackson
– Jeremy Jackson, Commented Jun 28, 2015 at 14:27
@JeremyJackson What I am trying to display is same as what I read from the object. DD/MM/YYYY — Abdulrhman Alsri
– Abdulrhman Alsri, Commented Jun 28, 2015 at 14:30
So the object date is stored as DD/MM/YYYY? What happens if you format it as YYYY-MM-DD? — Jeremy Jackson
– Jeremy Jackson, Commented Jun 28, 2015 at 14:32
@JeremyJackson Why? Maybe I did not understand what you aim to? — Abdulrhman Alsri
– Abdulrhman Alsri, Commented Jun 28, 2015 at 14:33
I thought maybe that would do it, but after a bit of research that isn't the case. Can you post your dateOptions variable? — Jeremy Jackson
– Jeremy Jackson, Commented Jun 28, 2015 at 14:41

Taha Amine Zeghbib · Accepted Answer · 2015-06-28 14:50:11Z

1

see this plnkr http://plnkr.co/edit/mDHliPweKoUNOAmVv5oo?p=preview

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<pre>Raw date is: <em>{{dt}}</em></pre>

your date retrieved from the server should have the same format as Raw date to be accepted by date picker you cannot pass already formated dates as Model this is the problem here

answered Jun 28, 2015 at 14:50

Taha Amine Zeghbib

581 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shailesh Kumar Dayananda · Accepted Answer · 2015-06-28 15:21:10Z

Question 1: If read this data from a particular object, 4/5/1990, how can I make the datepicker selected date as that date: 4/5/1990 First case: In case the date is 4/5/1986, it swap day and month of the date format. i.e: 4/5/1990 ---becomes---> 5/4/1990 Override today function:

$scope.today = function() {
$scope.dt = "4/5/1990"; };  $scope.today();

Question 2: no date is selected in case of this date: 28/5/1986 Answer: Use moment.js. This because using string to set date is always erroneous. It always recommended to use some standard lib.

$scope.today = function() {
$scope.dt = moment("28/5/1986", "DD-MM-YYYY").format();};  $scope.today();

Moment JS is a wonderful library to use when you want to format dates.

Example: http://plnkr.co/edit/NWQutvl8vXY9YP2LoIZ8

Abdulrhman Alsri · Accepted Answer · 2015-06-28 16:41:58Z

0

The returned date by the datepicker is i.e 2015-06-03T15:25:51.211Z. But I truncate it to be: 2015-06-03 and save it in databse.

The problems comes now, when I bind 2015-06-03 to datepicker, it does not accept it. It accepts this only: 2015-06-03T15:25:51.211Z

That was the problem that I discovered, I solved it by not truncating the date and store it as 2015-06-03T15:25:51.211Z. The datepicker became able to bind it for edit by user.

answered Jun 28, 2015 at 16:41

Abdulrhman Alsri

1,7375 gold badges17 silver badges28 bronze badges

Comments

Shailesh Kumar Dayananda · Accepted Answer · 2015-06-29 04:48:57Z

0

@AbuTaha: This problem can also be solved by using moment js.

$scope.today = function() {
$scope.dt = moment("2015-06-03T15:25:51.211Z", "YYYY-MM-DD").format();  };  $scope.today();

answered Jun 29, 2015 at 4:48

Shailesh Kumar Dayananda

661 silver badge7 bronze badges

1 Comment

redress Over a year ago

seems like overkill, considering moment.js is a 3k liine library

Collectives™ on Stack Overflow

Angular bootstrap datepicker - how to set date explicitly?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related