AngularJS Date Range Picker in Neutral Timezone
Previously, I blogged about a way to store dates or timings using the Angular UI Bootstrap widgets in a timezone-neutral manner.
In this previous blog article, I presented a way to store dates and timings in a timezone-neutral manner using the popular Angular UI Bootstrap widgets. In order to extend the functionality of my website, I had to allow the selection of date ranges, but I was looking for a AngularJS widget that is much more user friendly than selecting 2 different dates using standard datepickers. Eventually, I stumbled upon https://github.com/fragaria/angular-daterangepicker which boasts sufficiently powerful features, though lacking in timezone support again.
Why do we need timezone support?
To cut the chase short, I will suggest that you check out my previous post about the need for timezone support.
How to convert the dates to a neutral timezone using the angular-daterangepicker widget?
If you read my previous post, you will notice that the code in that article could probably serve the same function here.
However, there’s a caveat.
angular-daterangepicker widget stores dates (or timings) internally as MomentJS objects by utilizing the MomentJS library, and MomentJS objects are different from standard Date objects.
So below here is the revised code to support the
angular-daterangepicker widget. The part that is revised is mainly the parser function.
And again, you would use the directive together with the
angular-daterangepicker widget like this:
Similarly, you can then display the stored dates using the AngularJS
date filter adjusted to the UTC timezone.