I'm currently utilizing the Angular Material datepicker component found at https://material.angular.io/components/select/overview
However, it seems to only display the date without the current time: Mon May 28 2018 00:00:00 GMT+0530 (IST)
Is there a method to also retrieve the current time along with the date using this datepicker?
If you want to handle date parsing before setting it to your model, consider using the ngModelChange event in Angular. I suggest using momentJS for simple date manipulations.
Here's how you can implement it in your HTML:
<input [ngModel]="date" (ngModelChange)="onDataChange($event)" matInput [matDatepicker]="picker" placeholder="Choose a date">
In your Component.ts file:
onDataChange(newdate) {
const _ = moment();
const date = moment(newdate).add({hours: _.hour(), minutes:_.minute() , seconds:_.second()})
this.date = date.toDate();
console.log({hours: _.hour(), minutes:_.minute() , seconds:_.second()})
}
You can view the complete solution here: https://stackblitz.com/edit/angular-ecq2lc
Presently, the material date picker only displays the current date without the time component included. However, there is an ongoing discussion in the official repository suggesting that a time picker may be added soon.
At this moment, the angular material component is not capable of providing the current time. However, you can manually retrieve the time from a timestamp by using the following function:
function getTimeFromDate(timestamp) {
let date = new Date(timestamp * 1000);
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
return hours+":"+minutes+":"+seconds;
}
let timeStamp = new Date("Mon May 28 2018 00:00:00 GMT+0530 (IST)");
console.log(getTimeFromDate(timeStamp));
Consider the following scenario: currenttime = Mon May 28 2018 00:00:00 GMT+0530 (IST)
In this example, currenttime is used to represent the current date and time. If you want to use the actual current date, simply use new Date()
//Method for getting exact time
Exacttime(){
this.functionName = this.diffhours(new(currenttime))
}
diffhours(currenttime){
var diff = new Date(currenttime);
diff .getHours(); // => 9
diff .getMinutes(); // => 30
diff .getSeconds(); // => 51
}
This solution has been a game-changer for me
In my situation, I am able to choose any date, but the time is always set to local time
function updateDate(event: MatDatepickerInputEvent<Date>) : void
{
if(event.value)
{
const picker = new Date(event.value);
picker.setHours(new Date().getHours());
picker.setMinutes(new Date().getMinutes());
picker.setSeconds(new Date().getSeconds());
this.dateInput = picker;
}
}
I'm new to using hooks and I'm facing an issue with setState when trying to update data received from an API. Despite logging the response data successfully, it seems that the state does not update as expected. My useEffect function is set to run ...
When integrating TS and Angular, I've noticed that everything in my controller is accessible from the view. For example, myPrivate will be visible on $ctrl. class MyController extends BaseController implements SomeInterface { private myPrivate: s ...
I have created a custom input field as a separate component. I want to include multiple input fields in the parent component using directives: <app-input ...></app-input> My goal is to pass the blur event/function to the parent component speci ...
I have created an innovative Apache Cordova Application that leverages a Node.js web server to retrieve data from a web API, enabling the JavaScript-based project to utilize the information obtained from the API. Is there a method to integrate this Node w ...
Is there a way to change the font in Angular 4 Material material.angular.io using the styles file in .CSS format instead of SASS? While the documentation offers an example for SASS at: https://github.com/angular/material2/blob/master/guides/typography.md ...
I am currently integrating Angular 5 and Bootstrap 3 for a project. One of the forms on my website sends the input field data via email and includes a modal. I want to be able to trigger the modal based on a successful or error response from the server. I ...
When creating a watch on Text box and Check box models to call a custom-defined function, I want to avoid calling the function during the initial loading of data. To achieve this, I am using a 'needwatch' flag inside the watch to determine when t ...
Is there a way to download a CSV file within an ajax call? I have an ajax request in my Laravel controller that successfully retrieves the file contents in the response. However, I am facing issues with actually downloading the file. Laravel controller c ...
My HTML page has the following controller setup: ... <div data-controller="parent"> <div data-target="parent.myDiv"> <div data-controller="child"> <span data-target="child.mySp ...
I have a button on my page that has a special data attribute associated with it: <button id="manageEditContract" type="button" class="btn btn-default" data-is-allow-to-edit="@(Model.Contract.IsAllowToEdit)"> @(Model.Contract.IsAllowToEdit ? " ...
Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...
On my webpage, there is an iFrame containing a table where I want to add a click event to the rows. The challenge is retrieving the selected row within the iFrame from the parent window. The goal is to define a class for a clicked table row like this: $( ...
Below is a class called Product @Injectable() export class Product { brand: string; } I am injecting the Product class into ProductService export class ProductService { constructor(private readonly product: Product) {} update(products) { ...
I am currently experimenting with a function that adds logging and timing functionality to any function passed to it. However, I am facing a challenge when trying to test the timing aspect of it. Here are my functions: //utils.js export const util_sum = ( ...
If I need to show the following string, including the {{ }}, in an Angular 2+ template: Hello {{name}}, how are you?" Note: The entire string will be hardcoded, not from a variable. What is the optimal method to encode the curly braces so they are not ...
I've been working on an HTML form that can interact with a PHP API to retrieve client data and then update user stats in a MySQL database. Currently, I am converting the data into a JSON object and using JSON.stringify to create a string for sending ...
I am looking to obtain the indirect link of a Google search result. After performing a search on Google, if I right-click on the result link, it changes to something like this: https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&am ...
I recently delved into using the Joi NPM module and found it confusing that although it is described as a class in the documentation, it does not require creating a class object like var joi = new Joi();. Can you explain how this works? My understanding o ...
While attempting to connect my app to the backend using Udemy's Nuxt.js course, I encountered a GET http://localhost:3000/ 500 (Internal Server Error) on the client side with the following code: import Vuex from 'vuex'; import axios from &a ...
Looking for a JavaScript function f that can take an anonymous function g and a name n, and assign g to that name in the global scope or current scope. The function should be usable in this way: f(function(){ /* code */ }, "foo"); foo(); // this call sho ...