date-range picker picks date of the day before

Question

I am using angular daterange picker to pick one date and here is how my html looks like:

<input date-range-picker ng-model="model" options="{singleDatePicker: true}"
       class="form-control date-picker" type="text"/>

Now when I select a date when the calender pops up, it selects the date apparently but when it is sent to backend, it is actually the date of one day before. i.e, If I select 28-02-2020 it will send 27-02-2020. Also, I just want the datepicker to send just the date, currently it sends it something like this:

2020-02-27T19:00:00.000Z

What am I doing wrong here? Any help?

Seems like a timezone issue. Have you checked the options/timezone settings? — Bill P, Feb 27 '20 at 12:20
There isn't a built-in date-range-picker in AngularJS. Can you indicate which one you are using ? — Julien, Mar 04 '20 at 07:12
https://stackoverflow.com/questions/7556591/is-the-javascript-date-object-always-one-day-off/31732581#31732581 — Praveen Soni, Mar 04 '20 at 11:13

score 4 · Answer 1 · edited Jun 20 '20 at 09:12

With AngularJS, date pickers need to set the ng-model-options timezone to UTC:

<input type="date" ng-model="pickedDate" ng-model-options="{timezone: 'utc'}">

For more information, see

AngularJS ng-model-options Directive API Reference - Specifying Timezones

The DEMO

<script src="//unpkg.com/angular/angular.js"></script>

<body ng-app>
    <h1>Hello Plunker!</h1>
    <input type="date" ng-model="pickedDate" ng-model-options="{timezone: 'utc'}">
    <br>
    pickedDate={{pickedDate}}
</body>

score 1 · Accepted Answer · answered Mar 03 '20 at 09:27

1

You can add your timezone to date by using the following way,

var d = new Date('yourDate');
d.setMinutes( d.getMinutes() + d.getTimezoneOffset() );

'd' should be the correct date

Or

You can also check by simply doing like 'Your Date'.toISOString()

answered Mar 03 '20 at 09:27

Pushprajsinh Chudasama

7,772
4
20
43

I still get the date of one day older. The problem is still there. I selected 2020-03-12 and it sends 2020-03-11. – Saani Mar 03 '20 at 09:42
Can you provide your code in stackblitz so that it would be more easy to debug. @Saani – Pushprajsinh Chudasama Mar 03 '20 at 10:10

date-range picker picks date of the day before

2 Answers2

The DEMO