I understand that the datepicker (I'm using AngularStrap's datepicker) is "behind" a day because of how dates are calculated in javascript. My problem is, how to I get it to not take the timezone into consideration and just stick with the entered date... no adjustments?

I select February 1, 2014 in the datepicker. My value on the screen is 2/1/2014 and I want that value to be saved. However, the datepicker turns this into Fri Jan 31 2014 19:00:00 GMT-0500 (EST) apparently because it subtracts the 5 hours for my timezone from the entered date. I do not want this. If I enter 2/1/2014 I want that date, regardless of the timezone.

What is the best way to intercept/change/edit this value so that entering 2/1/2014 gives me exactly that date... no conversion for timezone? Should I modify the datepicker code itself (this seems like a bad idea)? Should I change the value myself prior to sending it to the backend by adding in some sort of offset? If so, how do you add time to a value that console displays as Fri Jan 31 2014 19:00:00 GMT-0500 (EST)?

I understand that the datepicker (I'm using AngularStrap's datepicker) is "behind" a day because of how dates are calculated in javascript. My problem is, how to I get it to not take the timezone into consideration and just stick with the entered date... no adjustments?

I select February 1, 2014 in the datepicker. My value on the screen is 2/1/2014 and I want that value to be saved. However, the datepicker turns this into Fri Jan 31 2014 19:00:00 GMT-0500 (EST) apparently because it subtracts the 5 hours for my timezone from the entered date. I do not want this. If I enter 2/1/2014 I want that date, regardless of the timezone.

What is the best way to intercept/change/edit this value so that entering 2/1/2014 gives me exactly that date... no conversion for timezone? Should I modify the datepicker code itself (this seems like a bad idea)? Should I change the value myself prior to sending it to the backend by adding in some sort of offset? If so, how do you add time to a value that console displays as Fri Jan 31 2014 19:00:00 GMT-0500 (EST)?

• javascript
• angularjs
• date
• datepicker

Share Improve this question Follow asked Feb 19, 2014 at 8:10 LotharLothar 3,50988 gold badges4646 silver badges5858 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

I solved this problem with a custom directive https://gist.github./weberste/354a3f0a9ea58e0ea0de

It's for Angular Bootstrap datepicker but I guess it should work for AngularStrap datepicker as well since it only depends on the corresponding ngModel rather than the datepicker itself.

Essentially, I'm reformatting the value whenever a date is selected on the datepicker (this value, a yyyy-mm-dd formatted string, will be stored on the model) and whenever the model is accessed to populate the view, I need to wrap it in a Date object again so datepicker handles it properly.

In other words, it is exactly doing the interceptions that you ask for in your question.

I know this thread is kind of old but since there is no accepted solution I thought I'd offer what finally worked for me after lots of messing around:

The issue in my case was that the datepicker was using the wrong timezone so when I would try to edit an event, the wrong date would display even though the correct date was stored in the db. The following fixed it for me:

 var evDate = new Date(data.eventDate); //data.eventDate is the date string
 evDate.setMinutes(evDate.getMinutes() + evDate.getTimezoneOffset()); 

 $scope.eventInfo.eventDate = evDate;

I found this solution here: https://github./angular-ui/bootstrap/issues/2628

If you don't mind loading another resource, then I would remend using MomentJS as it takes the pain out of dates in JavaScript. You can do something like `moment(datepicker value).local()' to get the date without the timezone offset.

http://momentjs./docs/#/manipulating/local/

I have found a way. convert that date to string first. here is the code.

 var SelectDate = $scope.GetFormattedDate(Date.parse($("#Date").datepicker("getDate")));            
     $scope.GetFormattedDate = function (CalDate) {
            var re = /-?\d+/;
            var WDate = CalDate.toString();
            var m = re.exec(WDate);
            var lastDate = new Date(parseInt(m[0]));
            var mm = lastDate.getMonth() + 1;
            var dd = lastDate.getDate();
            var yyyy = lastDate.getFullYear();
            var formattedDate = mm + '/' + dd + '/' + yyyy;

            return formattedDate;
        }

Now Pass SelectDate to your controller. bingo problem has been resolved :)

Guys if you are experiencing this problem is because probably,you are reactivily ,puting data in boostrap datepicker.This solution worked for me. First you check if date is null

dateBegin===null?dateBegin=null:dateBegin = new Date(formatDate(dateBegin,'yyyy-MM-dd','en'));

**if is null you set its value to null which you are going putt in your Form Group and in Form Group Control

this.ugovorForm = new FormGroup({'dateBegin':new FormControl(dateBegin)})

else you will set Date and format it using formatDate property , provided by Angular.I was struguling with this problem for along time.And its because I'm loading dates from Database.Good Luck;