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

Fixed position not being maintained after clicking the button

Create a custom npm package that is compatible with frontend environments like create-react-app. Ensure you have a suitable loader in place to handle the specific file type of the module

Connecting Angular components to the Document Object Model (DOM)

Inserting a line break in real-time within a JSX statement

Issue with displaying props value at the beginning of a function in ReactJS render

What is the process of emphasizing a WebElement in WebdriverIO?

What is the best way to transfer data from a clicked table row to another component?

What is the process for embedding a NextJS app within a different website?

A "Uncaught TypeError" error occurs when trying to execute a function using the dollar sign

When using jQuery to add an item to a List, it disappears immediately after

Using Jquery to add a list after parsing JSON data stored in localStorage

PreventDefault doesn't work well with Bootstrap toggling data

Reverse changes made to a massive object and then redo them

The conditional ng-class styling will be applied to each and every div on the page

What is the best way to convert a date to ISO 8601 format using JavaScript? Are there any built-in functions or methods in

Determine the percentage of payments, similar to Upwork, by leveraging the power

The skin colors are failing to load on JWPlayer7

Instead of using <div>, try substituting it with a different HTML page

Utilize the key as the value for options within an object iteration in Vue.js

Struggling to implement nested routes with react-router-dom version 5.2.0?