Utilizing Angular Material Design: Connecting a Date Object to MdDatePicker

Link to Material Design datepicker official page

I recently learned how to use the Material Design datepicker from the official website and now I want to bind the selected data to a Date object.

Here is an example code snippet from datepicker-overview-example.component.html:

<md-input-container>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>

In the component file datepicker-overview-example.component.ts:

import {Component} from '@angular/core';


@Component({
  selector: 'datepicker-overview-example',
  templateUrl: 'datepicker-overview-example.component.html',
  styleUrls: ['datepicker-overview-example.component.css'],
})
export class DatepickerOverviewExample {
        @Input() date: Date;
}

I'm looking for guidance on how to properly bind it. Any suggestions?

Answer №1

When you set the value property binding to the input element, it allows for dynamic data input.

<md-input-container>
  <input  [value]="value" mdInput [mdDatepicker]="picker" placeholder="Choose a date">
  <button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker (selectedChanged)="selectedChanged($event)" #picker></md-datepicker>

Typescript:

value:Date =new Date();

Check out the LIVE DEMO

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

Retrieve a targeted section of state from the store with @ngrx when incorporating a smart component in a recursive manner

As a newcomer to ngrx, I've come across a perplexing issue that has me stumped. Essentially, I have a ListComponent that displays an array of ListItemComponents retrieved from a ngrx store. @Component({ ... template: ` <list-item *ngFor= ...

The issue persists wherein getBoundingClientRect fails to provide the accurate value following a resize

I have implemented a custom directive that appends a dropdown to the body when it is displayed. The logic functions correctly when executed within the ngAfterViewInit lifecycle, but I encounter issues when attempting to use the same logic within the wind ...

What techniques can you leverage in React to iterate through nested arrays, such as using .map or other alternatives?

As part of my work, I often come across an Array structure similar to the one below: Array = [ { product1, orderedBy = [{customer1}, {customer2},.....,{customerN}] }, { product2, ...

Unusual occurrences with nested Angular directives

I have been trying to implement directives within other directives, but the results are not what I expected. Can anyone help me understand this code snippet: var app = angular.module('blah', []); app.directive('one', function() { ...

The ng-option feature has taken over as the new default option

My select tag looks like this: <select ng-model="vm.fooModel" ng-options="item.id as item.name for item in vm.fooOptions" > <option value="none">Select</option> </select> The problem arises when angular 1.6 renders ...

Adding a new line in the configurations of MatDialogConfig (Angular)

Here is a code snippet: private mDialog: MatDialog, const dialog = new MatDialogConfig(); msg = "I enjoy coding in Angular.\r\n I am learning TypeScript." dialog.data = { message:msg }; alert (msg); mDialog.open(AB ...

The burger icon for toggling the navigation bar on the template does not seem to be functioning properly on

Unable to toggle hamburger icon on mobile view using Rails... I'm experiencing an issue with the navbar button in Rails that was obtained from a template. The navbar button toggles correctly and registers a click event which is logged in the console. ...

Retrieving request information from the getInitialProps() function

Currently, I am attempting to send data from a python script to a Next.js server. #python script import requests post_data = {'username':'bob', 'id' : 32} # POST some form-encoded data: post_response = requests.post(url=&apo ...

Tips for correctly implementing CORS (Cross-Origin Resource Sharing)

Is there a way to securely access a resource from a third-party domain using XML HTTP Requests (XHR, AJAX)? I have set up CORS on both the target and origin sides with the following configuration: Access-Control-Allow-Origin: http://www.example.com, http ...

What is the best way to transform data from a single form into a JSON array?

explore (handlebars) {{!< main}} <form class="ui form" action="/design/add" method="POST"> <div class="order_list"&yt; <h1>Add Product</h1> <br> {{!-- <input type="f ...

"Retrieve a variable from the code-behind file and use it in the ASPX

I am attempting to retrieve a variable from the code behind page and display it in an ASPX page with HTML formatting. Here is the code I am using: Note: I have assigned a value to a StringBuilder object, stored it in a variable, and now I am trying to acce ...

Creating red fields on validation errors in CodeIgniter using AJAX

I am facing an issue with making input fields red on validation errors in code-igniter using ajax and jquery. Currently, all input fields turn red when there is an error, even if only one field has a mistake. I want to modify it so that only the specific i ...

Setting the value of a custom component property dynamically after the component has been rendered

I'm currently developing an Angular application and have a specific requirement to work on. I am using a custom component with 3 inputs, and I want to bind this custom component tag in the HTML of my page. <my-column [setInfo]="info" [dis ...

Insert a percentage sign into a right-aligned text box

I am trying to figure out how to permanently display a % symbol at the far right side of a textbox that shows a percentage. Can anyone help me with this? ...

Display a div on page scroll using jQuery

Check out this snippet of HTML code I have: HTML <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <div id="box4"></div> <div id="box5"></div> And here's a segment of C ...

Updating Arrays in Node.js isn't happening as expected

Hello, I have a function that I am calling from my controller like this: var getLastPoll = await socketModel. getPollOptionsByPollId(data.poll_id); but the controller is returning an empty array as a result. However, when I log the result in my model, ...

utilize the vue component data

I have created a basic component, but I am encountering an issue where attempting to access the component's data returns undefined. Here is my code snippet: Vue.component({ template:`<div>{{message}}</div>`, data() { return { com ...

Why are there red squiggly lines appearing on properly written JavaScript code in Visual Studio Code?

Recently, I've been encountering a frustrating issue with irritating red squiggly lines appearing under my import statement. Despite the fact that the code functions perfectly and everything operates as anticipated, these lines continue to bother me. ...

Utilizing Hover Sensitivity

I recently completed the development of a Wordpress theme which you can check out at Although everything is functioning well, I have some concerns about the navigation. While the sliding position indicator works smoothly, I would like to incorporate the h ...

Handling dynamic routes with React Router 4 and the 404 path

I have been working with the latest version of React Router (4) and have implemented a dynamic route configuration as described in the tutorial. The routes are functioning correctly, except for when I tried to add a 404 path following the tutorial's i ...