creating a pre-filled date input field in the user interface

Hey there, I'm just getting started with vmware clarity UI. Currently, I am facing an issue with using datetime-local. I am trying to prepopulate the current date and time in the datetime-local field using ngModel with the format 2017-06-13T13:00. While it does display on the UI, the time is not showing correctly as it's currently lagging behind by 5 hours IST. Any idea where I might be making a mistake? Thanks in advance

HTML component

 <clr-input-container>
    <label>Start Time</label>
    <input type="datetime-local" clrInput [(ngModel)]="start_time" name="start_time" style="width:100%" required />
    <!-- <clr-control-helper>Please choose Incident Start Date&Time in DD/MM/YYYY Hr:M:-AM/PM</clr-control-helper> -->
    <clr-control-error>This field is required!</clr-control-error>
 </clr-input-container>

TS file

start_time =  new Date().toISOString().substr(0, 16);

https://i.sstatic.net/cjPr1.png

Answer №1

This content pertains to HTML elements and how they function, rather than Clarity specifically.

The issue here lies in the creation of a new date based on UTC which then has the timezone removed (using substr to eliminate the Z). The datetime-local input assumes it is in the local time zone, therefore constructing the date in the local time zone will ensure it displays correctly. Creating the time manually or utilizing a library like MomentJS is necessary as there is no JavaScript Date method that provides the format YYYY-MM-DDTHH:MM.

It's important to note that datetime-local is not universally supported by all major browsers, so caution should be exercised when considering its use.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to refresh an array in a different component?

It all starts with a data response object: let response = { attachments: [{id: 1}, {id: 2}, {id: 3}] } This valuable data is utilized in the root component <app-root></app-root> <app-documents [response]="response"></app- ...

What is the process for removing a specific column (identified by its key value) from a JSON table using JavaScript and Typescript?

[{ "name": "employeeOne", "age": 22, "position": "UI", "city": "Chennai" }, { "name": "employeeTwo", "age": 23, "position": "UI", "city": "Bangalore" } ] If I remove the "Position" key and value from the JSON, the updated r ...

Unable to locate the _app.js file within my Next.js project

After using "npx create-next-app" to set up my NextJs project, I came across a situation where I needed to define TransactionContext in _app.js. However, I encountered the issue that this file is not included in my project. Any assistance would be greatly ...

Utilizing Angular with Internet Explorer

As I embark on my journey with Angular development, I sought advice from a friend who has been in the field for a year. He mentioned that he designs and tests his programs using Chrome to ensure the components look perfect. However, he also needs to supp ...

Tips for sending a post request using Angular 4

I'm currently facing an issue while attempting to execute a post request using Angular 4 to transmit lat and lng parameters: let data = {lat: this.newLat, lng: this.newLng}; this.http.post(url, data) .map(response => response.json()) .subscri ...

handle HTTP errors within Observable.interval()

I have a block of code that runs every hour to a specific URL. Currently, if the URL is not found or returns a 500 error, I receive the error message. The application utilizes service workers, and functions properly when a valid URL is provided, triggering ...

Problems encountered with operating the Bootstrap burger menu

After following the Bootstrap navbar documentation and implementing the code in my bs-navbar.component.html file, I encountered an issue with the hamburger menu. Despite everything being set up correctly, clicking on the hamburger icon did not display the ...

Is there a way to access specific news details within my Ionic4 app?

I recently created an Ionic4 app that displays news fetched from Firebase Firestore on a specific page. However, I'm struggling with implementing a functionality where clicking on a news item will navigate to a details page showing more information ab ...

Replace Nebular theme with a new design for a single component

I am currently using Nebular in my Angular application and I am trying to figure out how to customize the theme settings for a specific component on just one page, without affecting other instances of the same component that are using the default settings. ...

Error: Invalid argument type

I'm encountering difficulties retrieving data from an API as I delve into learning Angular 2. The error message I am facing is: url.js:106 throw new errors.TypeError('ERR_INVALID_ARG_TYPE', 'url', 'string', url); Typ ...

Encountering an error with the ".ts" file extension when attempting to execute a ts-node script

I am currently facing an issue while trying to execute a script that consists of two .ts files in a regular folder. One file contains the script, and the other has helper functions required to run it. Additionally, I am importing external libraries such as ...

The monorepo contains TypeScript files with a .js extension, causing confusion for IDEs that are unable to recognize TypeScript code within them

After cloning the React monorepo from GitHub and opening it as a new project in WebStorm IDE, I encountered an issue. It turns out that all the .js files in this repository are actually written in TypeScript, causing confusion for the IDE. For instance: / ...

Verify whether the message received contains a specific text within the property

Currently, I am facing a challenge with displaying a specific div in my component template only if any incoming messages contain the TYPE_OTHER property. With numerous variations of the TYPE_OTHER identifier, I am pondering on creating a condition that can ...

How to dynamically disable a checkbox in Angular reactive forms depending on the value of another checkbox

I am attempting to deactivate the checkbox based on the value of other checkboxes. Only one of them can be activated at a time. When trying to activate one of the checkboxes, I encounter an issue where the subscribed value is being repeated multiple times ...

Trouble with the page not updating after creating or updating a task

Currently, I am developing a project using Next.js along with Drizzle ORM. The main functionality involves creating and updating tasks. However, after submitting the task form, the page navigates back to the homepage, but the newly created/updated task doe ...

Why doesn't the primitive value get updated in Angular Service?

I've been exploring the functionality of Angular Services, and I'm encountering an issue with the heroCounter (number) not updating correctly while the hero array does. When I add a new dummy hero, I expect the heroCounter to increment accordingl ...

the window.matchMedia event listening for the dark color scheme preference fires just a single time

My goal is to automatically change the theme mode (light/dark) based on the user's device preference using addEventListener. However, I am facing an issue where the event is only triggered once. I am currently working with Ionic and Angular. Angular ...

execute the angular service within the "then(function(){})" block

I have a specific requirement where I need to capture a screenshot of a view when the user clicks on a button, send it back to the backend to save as a PDF in the database, and then allow the user to download the same image. Currently, I am utilizing the D ...

The timestamp will display a different date and time on the local system if it is generated using Go on AWS

My angular application is connected to a REST API built with golang. I have implemented a todo list feature where users can create todos for weekly or monthly tasks. When creating a todo, I use JavaScript to generate the first timestamp and submit it to th ...

Unable to retrieve the request body with bodyParser

I am currently working on a NextJS React Application. Within my server/index.tsx file, I have the following code: import next from 'next'; import express from 'express'; import compression from 'compression'; import bodyParser ...