Giter Club home page Giter Club logo

angular-material-datepicker's Introduction

Angular-Material-Datepicker

npm version

Prototype of a Material Design Datepicker Component for Angular 2 with theming support based on Angular-2-Datepicker by Kevin O'Leary (koleary94).

Animation of Datepicker

Installation & Setup

#1 Install DatePicker and Material packages with npm

npm install angular-material-datepicker
npm install @angular/material

#2 Import DatePicker and Material modules

import { MaterialModule } from '@angular/material';
import { DatePickerModule } from 'angular-material-datepicker';
...
@NgModule({
    imports: [
        MaterialModule.forRoot(),
        DatePickerModule,
        ...
    ],
    ...
})
export class YourModule { }

#3 Apply Material Theme to Datepicker

Import themes and apply them to the Calendar in your style.scss.

// Import a pre-built theme
@import '~@angular/material/core/theming/prebuilt/deeppurple-amber';
// Import your custom input theme file so you can call the custom-input-theme function
@import '~angular-material-datepicker/src/datepicker/calendar.component.scss';

// Using the $theme variable from the pre-built theme you can call the theming function
@include calendar-theme($theme);

Usage

#1 Add the <md-datepicker></md-datepicker> element in your html template.

<md-datepicker></md-datepicker>

#2 Binding to selected date.

You can use two-way-binding to set and get and selected value of the Datepicker.

<md-datepicker [(date)]="mydate"></md-datepicker>

Run Demo App

You can try out the Datepicker in the demo app built with Angular-CLI.

#1 To start the demo app clone or download the repo.

#2 Install the latest version of Angular-CLI

npm install -g angular-cli@latest

#3 Install npm packages

npm install

#4 Run the app

ng serve

#5 Open the app

http://localhost:4200/

License

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.