https://github.com/SteveDunlap13/MaterialTimeControl

Time component for angular/Material2 (5.0.0-rc0)
https://github.com/SteveDunlap13/MaterialTimeControl

angular-material angular5 flex material-design

Last synced: 3 months ago
JSON representation

Time component for angular/Material2 (5.0.0-rc0)

• Host: GitHub
• URL: https://github.com/SteveDunlap13/MaterialTimeControl
• Owner: SteveDunlap13
• License: mit
• Created: 2017-11-13T22:58:57.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-01-03T20:29:25.000Z (about 6 years ago)
• Last Synced: 2024-08-02T00:23:37.714Z (6 months ago)
• Topics: angular-material, angular5, flex, material-design
• Language: TypeScript
• Size: 244 KB
• Stars: 74
• Watchers: 7
• Forks: 50
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-material-design - MaterialTimeControl - Awesome Material Time picker and control (Angular / Components)

README

        
# Material Time Control

A simple time picker component using angular/material2 (5.0.0-rc0).  

While this component only shows a 12 hour clock it can easily be extended to show 12/24 mode.  

The main focus here a button beside a normal textbox that opens a dialog to select your hour, minute and meridan.  

  

See a demo with this stackblitz -> https://stackblitz.com/edit/material-time-control  

  

Enjoy!

![Dialog Hours](./demo/assets/OpenDialog_Hours.png?raw=true)

![Dialog Minutes](./demo/assets/OpenDialog_Minutes.png?raw=true)

## Install

```

yarn add SteveDunlap13/MaterialTimeControl

```

or

```

npm install SteveDunlap13/MaterialTimeControl

```

## Getting Started

To run this demo, run

```

npm install

npm start

```

or

```

yarn install

yarn start

```

and open http://localhost:4200/ in your browser.

## Build

To build the module run

```

tsc

```

### Prerequisites

Required:  

normal angular packages 5.0.1  

"@angular/material": "^5.0.0"  

"@angular/flex-layout": "^2.0.0-beta.10-4905443"

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details

## Acknowledgments

* Hat tip to classlinkinc/angular-material-time-picker

for the awesome CSS to display the clock component

## Updates

Dec 30, 2017

- merged a bunch of improvements from JumpLink (thank you)

- fixed the top of the hour bug noted by JaxonWright

- added 24 hour functionality as requested by Francis-Ide

- updated packages (expect typescript)