The datepicker in Angular UI is displaying incorrect dates

Question

The datepicker in Angular UI is displaying incorrect dates

Currently, I am developing an application using Angular and incorporating Angular UI. One of the features I have implemented is a datepicker that is coded like this:

<input type="text" 
       ng-required="true"
       name="targetDate"
       uib-datepicker-popup="MMMM yyyy" 
       min-mode="'month'" 
       datepicker-mode="'month'"
       is-open="opened" 
       ng-click="openCalendar()"
       close-on-date-selection="true"
       show-button-bar="false" 
       min-date="today"
       ng-model="targetDate"  />

The issue arises when I choose a month like July 2016, where the value stored in my targetDate model is "2016-06-30T21:00:00.000Z", which is essentially 3 hours behind July 2016. I suspect that this discrepancy may be due to the relationship between local time and Coordinated Universal Time (UTC) since I reside in a locale with a +2 hour offset from UTC. Despite this theory, I am uncertain as to why this anomaly occurs and how it can be rectified. Any thoughts or suggestions on this matter would be greatly appreciated.

javascript angularjs datepicker angular-ui

Answer 1

Answer №1

Check out this discussion on GitHub

If you're experiencing timezone issues, consider adjusting the timezone settings on your machine since the Date object typically uses local time by default.

Alternatively, you can convert the Date object to milliseconds using getTime() and then add 10800000 ms (3 hours) to adjust to the desired UTC date.

By following these steps, you can ensure that your new date model reflects the correct UTC time you want.

Answer 2

Check out this discussion on GitHub

If you're experiencing timezone issues, consider adjusting the timezone settings on your machine since the Date object typically uses local time by default.

Alternatively, you can convert the Date object to milliseconds using getTime() and then add 10800000 ms (3 hours) to adjust to the desired UTC date.

By following these steps, you can ensure that your new date model reflects the correct UTC time you want.

Answer 3

Answer №2

After struggling for a while, I finally found the solution to my issue and below is the code snippet that worked:

    function convertDateToJSON(dateInput) {
        if (dateInput === null || dateInput === undefined) {
            return null;
        }
        //return "\/Date(" + dateInput.getTime().toString() + ")\/";
        return "\/Date(" + (dateInput.getTime() + 10800000).toString() + ")\/";
    };

To use this function: convertDateToJSON(SelectedDateObjectToBeConverted);

Answer 4

After struggling for a while, I finally found the solution to my issue and below is the code snippet that worked:

    function convertDateToJSON(dateInput) {
        if (dateInput === null || dateInput === undefined) {
            return null;
        }
        //return "\/Date(" + dateInput.getTime().toString() + ")\/";
        return "\/Date(" + (dateInput.getTime() + 10800000).toString() + ")\/";
    };

To use this function: convertDateToJSON(SelectedDateObjectToBeConverted);

Answer 5

Answer №3

For those looking to work with just the date portion and not concerned about time, a practical approach is to convert it to local midnight at the earliest convenience. Opting for a constructor can be advantageous when choosing between a class and an interface for a model. By doing so, you can neatly handle this conversion process in one centralized location, eliminating scattered code clutter.

export class MyModel {

  // Despite static type enforcement, runtime can still assign a string to Date.
  date: Date;

  constructor(data: MyModel) {
    Object.assign(this, data);

    // Transform string input (e.g., '2008-12-25') into Date object set to local midnight.
    if (typeof this.date === 'string') {
      const localDate = new Date(this.date);
      this.date = new Date(localDate.getTime() + localDate.getTimezoneOffset() * 60000);
      console.log(this.date);
    }
  }
}

Answer 6

For those looking to work with just the date portion and not concerned about time, a practical approach is to convert it to local midnight at the earliest convenience. Opting for a constructor can be advantageous when choosing between a class and an interface for a model. By doing so, you can neatly handle this conversion process in one centralized location, eliminating scattered code clutter.

export class MyModel {

  // Despite static type enforcement, runtime can still assign a string to Date.
  date: Date;

  constructor(data: MyModel) {
    Object.assign(this, data);

    // Transform string input (e.g., '2008-12-25') into Date object set to local midnight.
    if (typeof this.date === 'string') {
      const localDate = new Date(this.date);
      this.date = new Date(localDate.getTime() + localDate.getTimezoneOffset() * 60000);
      console.log(this.date);
    }
  }
}

The datepicker in Angular UI is displaying incorrect dates

Answer №1

Answer №2

Answer №3

Similar questions

Child component in VueJs is undergoing a situation where the variable is found to be

Utilizing jQuery to toggle nested divs within identical parent divs when they contain more than three elements using the :nth-child selector

Repeating declarations in AngularJs controllers when injecting services

Determine whether a child node is an element or a text node using JavaScript

Use the npm-search feature to show only the name and description columns in the search results

AngularJS Mapping between two JSON files

Utilizing nodejs to interact with a web service

Sorting a Javascript table performs effectively, however, the results may vary when iterating through all the indexes

What are the best ways to create image animations on top of other images using CSS or JavaScript?

When attempting to invoke a JavaScript function on JSP, there seems to be no

Is there a way to narrow down Drive API list results based on a specific domain that has write permission?

Issue with reactivity not functioning as expected within VueJS loop without clear explanation

Tips for utilizing Async/Await within an expressjs router

Animation that responds to scrolling movements

Encountering a 404 error while attempting to establish a connection between Express and React

ng-repeat to display items based on dropdown choice or user's search input

Deactivate certain choices in React Select

"Create a smooth transition effect in CSS by fading out one div and fading in

I continue to encounter the error "Unexpected token b in JSON at position 0" when attempting to parse JSON data

what is the process for configuring a Universal link using javascript?