Angular - Using ng-pick-datetime to set initial value in a reactive form

Question

Angular - Using ng-pick-datetime to set initial value in a reactive form

Currently, I am in the process of developing a form and utilizing a popular date time picker plugin. Despite my attempts to initialize the value of the DateTime input, I have not been successful and even the default value is not being set in the form.

If you would like to review the code for more details, please visit this link: https://stackblitz.com/edit/ng-pick-datetime-format-i18n-bh5lqi?devtoolsheight=33&file=src/app/app.component.ts

I welcome any suggestions or advice on how to resolve this issue. Thank you in advance!

angular typescript datepicker angular-reactive-forms

Answer 1

Answer №1

As per @MikeOne's insight, it has been confirmed that you should establish the date using either the Date object or Moment object.

Approach 1: (Converting Date String to Date)

this.itineraryrForm.setValue({
  arrivalTime: new Date("01/01/2021 23:00")
});

Alternatively, Method 2: (Converting Date String to Moment with specified format)

this.itineraryrForm.setValue({
  arrivalTime: moment("01/01/2021 23:00", "DD/MM/YYYY HH:mm")
});

Access Solution on StackBlitz

Please Note: It is suggested to eliminate the usage of [(ngModel)] binding if you opt for [formControl], as it has been deprecated in Angular v6.

Answer 2

As per @MikeOne's insight, it has been confirmed that you should establish the date using either the Date object or Moment object.

Approach 1: (Converting Date String to Date)

this.itineraryrForm.setValue({
  arrivalTime: new Date("01/01/2021 23:00")
});

Alternatively, Method 2: (Converting Date String to Moment with specified format)

this.itineraryrForm.setValue({
  arrivalTime: moment("01/01/2021 23:00", "DD/MM/YYYY HH:mm")
});

Access Solution on StackBlitz

Please Note: It is suggested to eliminate the usage of [(ngModel)] binding if you opt for [formControl], as it has been deprecated in Angular v6.

Angular - Using ng-pick-datetime to set initial value in a reactive form

Answer №1

Approach 1: (Converting Date String to Date)

Alternatively, Method 2: (Converting Date String to Moment with specified format)

Similar questions

Issue with mobile browser validation for text field functionality not functioning properly

The concept of TypeScript usage within the `mui-x` DataGrid while calling the `useGridApiRef()` function

In the domain of React and Typescript, a minimum of '3' arguments is anticipated; nonetheless, the JSX factory 'React.createElement' is only equipped with a maximum of '2' arguments. This incongruity is signaled by the

I am experiencing issues with my Jest unit test case for Material UI's multi select component failing

Tips for sorting through an array of objects in JavaScript?

Inside the function() in angular 2, the value of 'this' is not defined

In Angular 16, allow only the row that corresponds to the clicked EDIT button to remain enabled, while disabling

Resolving the Challenge of Disabling typescript-eslint/typedef in Angular 13 with ESlint

The expiration of the Gitlab CI/CD cache leads to the failure of the build process

Putting a | in the navigation bar

Leveraging uninitialized data in Angular

Utilizing TypeScript/React to Access Data from an Excel Spreadsheet

What is causing the subscriber to receive the error message "Cannot access 'variable' before initialization" while referencing itself?

Ensure that the background view remains interactive while adding an overlay on top for an enhanced user experience

I'm in need of someone who can listen and detect any changes in my notifications table (node) in order to perform real-time data

Is it possible to create a distinctive property value within an ngFor loop that operates autonomously across two child components?

Tips for managing various potential return types in TypeScript?

Tips for accessing an AWS EC2 instance endpoint using HTTPS rather than HTTP

Angular2 is throwing an error: "NavigationService provider not found! (MenuComponent -> NavigationService)"

Determine if all resources on a page in Angular 4 have finished loading by keeping a loader spinning until everything is fully loaded