Skip to content

Commit 84ea13d

Browse files
cursoragentnsnayp13
andcommitted
feat: Add library build scripts and assets
Co-authored-by: nikaglichev <nikaglichev@gmail.com>
1 parent ac4cb3e commit 84ea13d

File tree

5 files changed

+305
-2
lines changed

5 files changed

+305
-2
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"start": "ng serve",
77
"build": "ng build",
88
"build:lib": "ng build angular-datepicker2",
9+
"prebuild:lib": "node scripts/prep-lib-docs.cjs",
910
"build:gh-pages": "ng build --configuration production --base-href https://nsnayp13.github.io/angular-datepicker2/",
1011
"lint": "ng lint",
1112
"e2e": "ng e2e",
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 nsnayp13
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.
Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
# Angular Datepicker2
2+
3+
Modern Angular datepicker component with standalone support. Compatible with Angular 16+. Date range picker, multiple dates, customizable templates. Lightweight, no extra dependencies.
4+
5+
![Node.js CI](https://github.com/nsnayp13/angular-datepicker2/workflows/Node.js%20CI/badge.svg)
6+
7+
## Features
8+
9+
-**Standalone Components** – Angular 16+ standalone ready
10+
-**Selection Modes** – Single, multiple dates, or date ranges
11+
-**Customizable** – Template support for custom day rendering
12+
-**Modern Angular** – Signals-friendly, OnPush, ES2022 builds
13+
-**TypeScript** – Strict typings for all APIs
14+
-**No Extra Deps** – Only peer deps: `@angular/core` and `@angular/common`
15+
16+
## Installation
17+
18+
```bash
19+
npm install @nsnayp/angular-datepicker2
20+
```
21+
22+
## Demo
23+
24+
[https://nsnayp13.github.io/angular-datepicker2/](https://nsnayp13.github.io/angular-datepicker2/)
25+
26+
## Quick Start
27+
28+
### Standalone Component (Angular 16+)
29+
30+
```typescript
31+
import { Component } from '@angular/core';
32+
import { AngularDatepicker2 } from '@nsnayp/angular-datepicker2';
33+
34+
@Component({
35+
selector: 'app-example',
36+
standalone: true,
37+
imports: [AngularDatepicker2],
38+
template: `
39+
<angular-datepicker2
40+
[(selectedDates)]="selectedDates"
41+
[selectMode]="'single'"
42+
(onDayClick)="onDayClick($event)">
43+
</angular-datepicker2>
44+
`
45+
})
46+
export class ExampleComponent {
47+
selectedDates: Date[] = [];
48+
49+
onDayClick(day: any) {
50+
console.log('Day clicked:', day);
51+
}
52+
}
53+
```
54+
55+
### Module-based (Angular 16+)
56+
57+
```typescript
58+
import { NgModule } from '@angular/core';
59+
import { AngularDatepicker2 } from '@nsnayp/angular-datepicker2';
60+
61+
@NgModule({
62+
imports: [AngularDatepicker2],
63+
})
64+
export class YourModule { }
65+
```
66+
67+
## API Reference
68+
69+
### Inputs
70+
71+
| Property | Type | Default | Description |
72+
|----------|------|---------|-------------|
73+
| `selectedDates` | `Date[]` | `[]` | Array of selected dates |
74+
| `selectMode` | `'single' \| 'multiple' \| 'period'` | `'single'` | Selection mode |
75+
| `shownDate` | `Date` | `new Date()` | Date to display initially |
76+
| `viewMode` | `ViewMode \| number` | `1` | Number of months to show |
77+
| `weekStart` | `number` | `0` | First day of week (0 = Sunday) |
78+
| `weekends` | `number[]` | `[0, 6]` | Weekend days |
79+
| `disabledDates` | `DisabledDates` | - | Disabled dates configuration |
80+
| `suggest` | `Suggest[]` | - | Predefined date suggestions |
81+
| `days` | `Day[]` | - | Custom day definitions |
82+
| `vertical` | `boolean` | `false` | Vertical alignment of days |
83+
84+
### Outputs
85+
86+
| Event | Type | Description |
87+
|-------|------|-------------|
88+
| `selectedDatesChange` | `Date[]` | Emitted when selection changes |
89+
| `onDayClick` | `Day` | Emitted when a day is clicked |
90+
91+
## Examples
92+
93+
### Date Range Selection
94+
95+
```typescript
96+
@Component({
97+
template: `
98+
<angular-datepicker2
99+
[(selectedDates)]="dateRange"
100+
[selectMode]="'period'">
101+
</angular-datepicker2>
102+
`
103+
})
104+
export class DateRangeExample {
105+
dateRange: Date[] = [];
106+
}
107+
```
108+
109+
### Custom Day Templates
110+
111+
```typescript
112+
import { DayDirective } from '@nsnayp/angular-datepicker2';
113+
114+
@Component({
115+
standalone: true,
116+
imports: [AngularDatepicker2, DayDirective],
117+
template: `
118+
<angular-datepicker2 [(selectedDates)]="selectedDates">
119+
<div *ad2day="let date from customDate" [attr.title]="'Custom day'">
120+
{{date.getDate()}}
121+
<div class="points">
122+
<div class="point blue"></div>
123+
<div class="point green"></div>
124+
</div>
125+
</div>
126+
</angular-datepicker2>
127+
`
128+
})
129+
export class CustomTemplateExample {
130+
selectedDates: Date[] = [];
131+
customDate = new Date(2024, 3, 15);
132+
}
133+
```
134+
135+
### With Suggestions
136+
137+
```typescript
138+
import { SelectMode } from '@nsnayp/angular-datepicker2';
139+
140+
@Component({
141+
template: `
142+
<angular-datepicker2
143+
[(selectedDates)]="selectedDates"
144+
[suggest]="suggestions">
145+
</angular-datepicker2>
146+
`
147+
})
148+
export class SuggestionsExample {
149+
selectedDates: Date[] = [];
150+
151+
suggestions = [
152+
{
153+
title: 'Last two weeks',
154+
selectMode: SelectMode.Period,
155+
selectedDates: [
156+
new Date(2024, 3, 1),
157+
new Date(2024, 3, 14)
158+
],
159+
},
160+
{
161+
title: 'Specific dates',
162+
selectMode: SelectMode.Multiple,
163+
selectedDates: [
164+
new Date(2024, 3, 1),
165+
new Date(2024, 3, 15),
166+
new Date(2024, 3, 30),
167+
],
168+
}
169+
];
170+
}
171+
```
172+
173+
## Interfaces
174+
175+
### SelectMode
176+
```typescript
177+
enum SelectMode {
178+
Single = 'single',
179+
Multiple = 'multiple',
180+
Period = 'period'
181+
}
182+
```
183+
184+
### ViewMode
185+
```typescript
186+
enum ViewMode {
187+
Quarter = 'quarter',
188+
Semester = 'semester'
189+
}
190+
```
191+
192+
### DisabledDates
193+
```typescript
194+
interface DisabledDates {
195+
dates?: Date[];
196+
after?: Date;
197+
before?: Date;
198+
}
199+
```
200+
201+
## Utilities
202+
203+
The library exports `DateUtils` class with helpful date manipulation methods:
204+
205+
```typescript
206+
import { DateUtils } from '@nsnayp/angular-datepicker2';
207+
208+
// Add/subtract days
209+
const tomorrow = DateUtils.adjustDate(new Date(), 1);
210+
211+
// Add/subtract months
212+
const nextMonth = DateUtils.adjustMonth(new Date(), 1);
213+
214+
// Get formatted date string
215+
const dateString = DateUtils.getYmd(new Date());
216+
```
217+
218+
## i18n
219+
220+
Set `registerLocaleData(locale, 'locale')` in your app. See [Angular i18n guide](https://angular.io/api/common/registerLocaleData)
221+
222+
## Supported versions
223+
224+
- Angular: 16–19 (peer deps `@angular/common` and `@angular/core` >= 16)
225+
- TypeScript: 5.x
226+
- Targets: ES2022 modules, modern browsers
227+
228+
> Built and tested with Angular 19.2. Backwards compatible to Angular 16 via peer ranges.
229+
230+
## Migration from v3.x
231+
232+
The library now uses standalone components by default:
233+
234+
```typescript
235+
// Before (v3.x)
236+
import { AngularDatepicker2Module } from '@nsnayp/angular-datepicker2';
237+
238+
// After (v4.x)
239+
import { AngularDatepicker2 } from '@nsnayp/angular-datepicker2';
240+
```
241+
242+
## SEO
243+
244+
**Description:** Modern Angular datepicker/calendar with date range, multiple selection, and customizable templates. Standalone-ready for Angular 16+.
245+
246+
**Keywords:** angular datepicker, angular calendar, angular 16 datepicker, angular 17, angular 18, angular 19, date range picker, standalone components, multiple dates, period picker, ui component
247+
248+
## License
249+
250+
MIT

projects/angular-datepicker2/ng-package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"entryFile": "src/public-api.ts"
66
},
77
"assets": [
8-
"../../README.md",
9-
"../../LICENSE"
8+
"README.md",
9+
"LICENSE"
1010
]
1111
}

scripts/prep-lib-docs.cjs

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const fs = require('fs');
2+
const path = require('path');
3+
4+
const root = path.resolve(__dirname, '..');
5+
const libDir = path.join(root, 'projects', 'angular-datepicker2');
6+
7+
function copy(src, dest) {
8+
fs.copyFileSync(src, dest);
9+
}
10+
11+
function main() {
12+
const rootReadme = path.join(root, 'README.md');
13+
const rootLicense = path.join(root, 'LICENSE');
14+
const libReadme = path.join(libDir, 'README.md');
15+
const libLicense = path.join(libDir, 'LICENSE');
16+
17+
if (!fs.existsSync(rootReadme)) {
18+
console.error('Root README.md not found');
19+
process.exit(1);
20+
}
21+
if (!fs.existsSync(rootLicense)) {
22+
console.error('Root LICENSE not found');
23+
process.exit(1);
24+
}
25+
26+
copy(rootReadme, libReadme);
27+
copy(rootLicense, libLicense);
28+
console.log('Copied README.md and LICENSE into library directory');
29+
}
30+
31+
main();

0 commit comments

Comments
 (0)