Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/martre3/ngx-dates-picker
Angular 2+ datepicker component with no JQuery dependency.
https://github.com/martre3/ngx-dates-picker
angular date-range-picker datepicker daterange-picker nojquery
Last synced: 3 months ago
JSON representation
Angular 2+ datepicker component with no JQuery dependency.
- Host: GitHub
- URL: https://github.com/martre3/ngx-dates-picker
- Owner: martre3
- License: mit
- Created: 2019-09-04T11:04:31.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T22:19:09.000Z (almost 2 years ago)
- Last Synced: 2024-07-06T05:17:43.005Z (4 months ago)
- Topics: angular, date-range-picker, datepicker, daterange-picker, nojquery
- Language: TypeScript
- Homepage:
- Size: 2.81 MB
- Stars: 1
- Watchers: 1
- Forks: 3
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - martre3/ngx-dates-picker - Angular 2+ datepicker component with no JQuery dependency. (UI Components / Form)
README
# ngx-dates-picker
Angular 2+ datepicker component with no JQuery dependency, forked from [bleenco/ng2-datepicker](https://github.com/bleenco/ng2-datepicker).
[](https://ci.bleenco.io/repo/6)
## Installation
1. Install package from `npm`.
```sh
npm install ngx-dates-picker --save
```
2. Include NgxDatesPickerModule into your application.
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxDatesPickerModule } from 'ngx-dates-picker';
@NgModule({
imports: [
BrowserModule,
NgxDatesPickerModule
],
declarations: [ AppComponent ],
exports: [ AppComponent ]
})
export class AppModule {}
```
## Example
```html
```
## NgModel
Accepted types are date `string`, javascript `Date` object and `DateRange` object (`{start: Date, end: Date}`).
If `selectRange` is `true` javascript `Date` object will be returned for selected date, else - `DateRange` object,
where `range.start` will be equal to `range.end` if one day is selected.
## Attributes
|Name|Type|Default|Description|
| --- | --- | --- | --- |
|`headless`|boolean|`false`|Disable datepicker's input|
|`isOpened`|boolean|`false`|Show or hide datepicker|
|`position`|string|`bottom-right`|Dropdown position (`bottom-left`, `bottom-right`, `top-left`, `top-right`, `static`)|
|`previousMonthButtonTemplate`|`TemplateRef`|`undefined`|Overrides left arrow used to go one month back.|
|`nextMonthButtonTemplate`|`TemplateRef`|`undefined`|Overrides right arrow used to go to next month.|
|`options`|object|see [options](#options)||
## Options
```ts
defaultOptions: DatepickerOptions = {
closeOnClickOutside: true;
closeOnSelection: true;
selectRange: false,
includeDays: 'previous-month'; // 'none', 'previous-month', 'next-month', 'all'. Should it render days outside current month.
minYear: 1970,
maxYear: 2030,
displayFormat: 'MMM D[,] YYYY',
barTitleFormat: 'MMMM YYYY',
dayNamesFormat: 'ddd',
rangeSeparator: '-' // Char that separates start and end dates in input field.
firstCalendarDay: 0, // 0 - Sunday, 1 - Monday
locale: {},
minDate: undefined, // Minimal selectable date
maxDate: undefined, // Maximal selectable date
barTitleIfEmpty: '',
placeholder: '', // HTML input placeholder attribute (default: '')
addClass: {}, // Optional, value to pass on to [ngClass] on the input field
addStyle: {}, // Optional, value to pass to [ngStyle] on the input field
fieldId: 'datepicker-0', // ID to assign to the input field. Defaults to datepicker-
useEmptyBarTitle: true, // Defaults to true. If set to false then barTitleIfEmpty will be disregarded and a date will always be shown
};
```
For available `format` options check out [here](https://date-fns.org/docs/format).
In case you want to initialize with an empty value, just assign null to the model attribute you're storing the date and you can customize the message in the bar with the property `barTitleIfEmpty`.
## Locale
To change the locale import it from `date-fns`. For example `import * as frLocale from 'date-fns/locale/fr'` and pass it to options `options={locale: frLocale}`.
## To Do
1. Fix packages vulnerabilities.
2. Write tests (not a single test has been written yet).
3. Add ability to add custom class to each calendar component.
## Run Included Demo
1. Clone this repository
```sh
git clone https://github.com/martre3/ngx-dates-picker.git
cd ngx-dates-picker
```
2. Install packages
```sh
npm install
```
3. Run Demo
```sh
npm start
```
## Licence
MIT