https://github.com/eastcoastdeveloper/datepicker-angular-component
Angular Date Picker Component
https://github.com/eastcoastdeveloper/datepicker-angular-component
angular angular-app angular-component angular-components angular-date-input angular-datepicker angular2 component date-picker datepicker
Last synced: 13 days ago
JSON representation
Angular Date Picker Component
- Host: GitHub
- URL: https://github.com/eastcoastdeveloper/datepicker-angular-component
- Owner: eastcoastdeveloper
- Created: 2022-11-03T07:08:26.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-12-05T22:15:47.000Z (6 months ago)
- Last Synced: 2025-12-09T12:11:31.813Z (6 months ago)
- Topics: angular, angular-app, angular-component, angular-components, angular-date-input, angular-datepicker, angular2, component, date-picker, datepicker
- Language: TypeScript
- Homepage:
- Size: 43 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Angular Custom Date Picker Component ##
A fully custom, Angular date-picker component built with HTML, SCSS, and TypeScript.
This component provides:
A dropdown calendar
Month & year selectors
Highlighting of the current day
Prevention of selecting future dates
A 6×7 (42-cell) grid that dynamically renders all days of the selected month
A clean UI wrapper matching standard Angular component patterns
### Directory Structure ###
/src/app/date-picker/
│── date-picker.component.html
│── date-picker.component.scss
│── date-picker.component.ts
Include the date picker inside any page using:
```
```
### Features ###
#### Custom Calendar Renderer ####
Builds a 42-cell date grid (6 weeks) including leading/trailing blank cells for alignment.
#### Month & Year Dropdowns ####
Click the month or year to toggle dropdown menus.
#### Current Date Highlight ####
Automatically highlights today’s date.
#### Future Date Restriction ####
Selecting a future date triggers an alert.
#### Simple, Reusable Markup ####
Can be dropped into any Angular component with minimal setup.
### Usage ###
```
currentDate }"
value="{{ months[monthIndex] + ' ' + currentDay + ', ' + year }}"
/>
✕
{{ months[monthIndex] }}
-
{{ month }}
{{ year }}
-
{{ year }}
- {{ day }}
{{ day.value }}
```
### Component Logic (date-picker.component.ts) ###
The component handles:
Calculating first/last day of each month
Generating a 42-cell matrix
Toggling calendar visibility
Selecting month/year/day
Blocking future dates
```
import { Component, OnInit } from '@angular/core';
@Component({
selector: '[app-calendar]',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.scss'],
})
export class DatepickerComponent implements OnInit {
calendarVisible = false;
d = new Date();
weekdays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
// Set Years
years = [
2003,2004,2005,2006,2007,2008,2009,2010,2011,2012,2013,2014,
2015,2016,2017,2018,2019,2020,2021,2022,2023,2024,2025
];
currentDay = this.d.getDate();
monthIndex = this.d.getMonth();
year = this.d.getFullYear();
firstDay: any;
lastDay: any;
monthsMenu = false;
yearsMenu = false;
daySpan: any[] = [];
selectedDate: number;
currentDate: number;
ngOnInit() {
this.firstLastDays();
}
calculateStartEndDate(firstDayOfMonth: number, lastDayOfMonth: number) {
this.daySpan = [];
let dayIndex = 1, emptyCells = 0;
for (let i = 0; i < 42; i++) {
if (firstDayOfMonth > i) emptyCells++;
this.daySpan.push({
value:
i >= firstDayOfMonth && i < emptyCells + lastDayOfMonth
? dayIndex++
: null,
});
}
}
firstLastDays() {
this.firstDay = new Date(this.year, this.monthIndex, 1);
this.lastDay = new Date(this.year, this.monthIndex + 1, 0);
this.calculateStartEndDate(this.firstDay.getDay(), this.lastDay.getDate());
}
selectYear(year: number) {
this.year = year;
this.firstLastDays();
this.checkForFutureDate(year, this.monthIndex, this.currentDay);
}
selectMonth(i: number) {
this.monthIndex = i;
this.firstLastDays();
this.checkForFutureDate(this.year, this.monthIndex + 1, this.currentDay);
}
selectDay(dayObj: any) {
this.currentDay = dayObj.value;
this.checkForFutureDate(this.year, this.monthIndex, this.currentDay);
}
openCalendar() {
this.calendarVisible = true;
}
closeCalendar() {
this.calendarVisible = false;
}
showMonths() {
this.monthsMenu = !this.monthsMenu;
this.yearsMenu = false;
}
showYears() {
this.yearsMenu = !this.yearsMenu;
this.monthsMenu = false;
}
checkForFutureDate(y: number, m: number, d: number) {
this.selectedDate = new Date(y, m, d).getTime();
this.currentDate = new Date().getTime();
if (this.selectedDate > this.currentDate) {
alert('Please select a non future date');
}
}
}
```
### License ###
MIT — free to use, modify, and integrate into any Angular project.