This is a date picker component for your Ionic 3 app. If you are looking for Ionic 4 checkout: https://github.com/write2sv/ionic4-date-picker
npm i ionic-calendar-date-picker --save
import { DatePickerModule } from 'ionic-calendar-date-picker';
@NgModule({
...,
imports: [
....
DatePickerModule
....
],
....
})
export class AppModule {}
<ionic-calendar-date-picker (onSelect)="dateSelected($event)"></ionic-calendar-date-picker>
(onSelect)
- An event that is created when a date is selected. Outputs Date object.
[date]
- A date object that sets the selected date in the calendar. (not required. Default is today)
[fromDate]
- A date object that sets the min date in the calendar. (not required)
[toDate]
- A date object that sets max date in the calendar. (not required)
[monthLabels]
- An array of month label strings. (not required. Default is ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];)
[dayLabels]
- An array of day label strings. (not required. Default is ['S', 'M', 'T', 'W', 'T', 'F', 'S'];)
<ionic-calendar-date-picker [notInCalendarStyle]="{'color': 'red', 'font-weight': 'bold'}"></ionic-calendar-date-picker>
None of these are required options.
[backgroundStyle]
- Background color of the component. Default: { 'background-color': '#ffffff' };
[notInCalendarStyle]
- When a day is not in the calendar. Default: { 'color': '#8b8b8b' };
[dayLabelsStyle]
- Day Label styling (S, M, T, W ... ). Default: { 'font-weight': 500, 'font-size': '14px' };
[monthLabelsStyle]
- Month Label Styling (Jan, Feb, Mar ... ). Default: { 'font-size': '15px' };
[yearLabelsStyle]
- Year Label Styling (2000, 2001 ...). Default: { 'font-size': '15px' };
[itemSelectedStyle]
- Styling on selected Item by the user. Default: { 'background': '#488aff', 'color': '#f4f4f4 !important' };
[todaysItemStyle]
- Styling on showing todays Day, Month, Year. Default: { 'color': '#32db64' };