Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bleenco/ng2-datepicker
Angular2 Datepicker Component
https://github.com/bleenco/ng2-datepicker
Last synced: about 6 hours ago
JSON representation
Angular2 Datepicker Component
- Host: GitHub
- URL: https://github.com/bleenco/ng2-datepicker
- Owner: bleenco
- License: mit
- Created: 2015-12-24T00:43:06.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2023-07-04T06:28:29.000Z (over 1 year ago)
- Last Synced: 2024-12-30T20:35:25.732Z (12 days ago)
- Language: TypeScript
- Homepage: http://ng2-datepicker.jankuri.com
- Size: 6.66 MB
- Stars: 310
- Watchers: 21
- Forks: 236
- Open Issues: 222
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - ng2-datepicker - Angular2 Datepicker Component. (Uncategorized / Uncategorized)
README
# ng2-datepicker
ng2-datepicker is simple and minimal Angular datepicker component. It is fully customizable.
## Installation
1. Install package from `npm`.
```sh
npm install ng2-datepicker --save
```
2. Include DatepickerModule into your application.
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatepickerModule } from 'ng2-datepicker';
@NgModule({
imports: [BrowserModule, DatepickerModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
```
And that's it, you can then use it in your component as:
```ts
date = new Date();
```
```html
```
## Options
```ts
import { DatepickerOptions } from 'ng2-datepicker';
import { getYear } from 'date-fns';
import locale from 'date-fns/locale/en-US';
// options sample with default values
options: DatepickerOptions = {
minYear: getYear(new Date()) - 30, // minimum available and selectable year
maxYear: getYear(new Date()) + 30, // maximum available and selectable year
placeholder: '', // placeholder in case date model is null | undefined, example: 'Please pick a date'
format: 'LLLL do yyyy', // date format to display in input
formatTitle: 'LLLL yyyy',
formatDays: 'EEEEE',
firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
locale: locale, // date-fns locale
position: 'bottom',
inputClass: '', // custom input CSS class to be applied
calendarClass: 'datepicker-default', // custom datepicker calendar CSS class to be applied
scrollBarColor: '#dfe3e9', // in case you customize you theme, here you define scroll bar color
keyboardEvents: true // enable keyboard events
};
```
For available `format`, `formatTitle` and `formatDays` options check out [here](https://date-fns.org/docs/format).
Then you apply custom options in your template as:
```html
```
## Theme customization
This examples uses SASS as style preprocessor.
```sass
.datepicker-blue
.calendar-container
background: #32A8E4
border: 1px solid #32A8E4
box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
top: 35px
left: 0
font-weight: 700
.month-year-text
color: #ffffff
.control
path
fill: #eff1f5
&:hover
path
fill: #ffffff
.day-name-unit
color: #fafafa
.day-unit, .year-unit
color: #ffffff
&.is-prev-month
color: #8ed0f0
&.is-today
background: #8ed0f0
&:hover, &.is-selected
background: #ffffff
color: #686669
&.is-disabled
color: #aaa8ab
&:hover
background: transparent
```
And in your component:
```ts
import { DatepickerOptions } from 'ng2-datepicker';
options: DatepickerOptions = {
calendarClass: 'datepicker-blue',
scrollBarColor: '#ffffff'
};
```
## Run Demo
1. Clone this repository.
```sh
git clone https://github.com/bleenco/ng2-datepicker
```
2. Install dependencies
```sh
npm install
```
3. Start the demo
```sh
npm start
```
## License
MIT