Ionic4 Datepicker Component

Author - Digvijay

Ionic4 Datepicker Component is our first contribution to Ionic4 Open Source Community. In Ionic1 for
Datepicker there was a nice option provided by rajeshwar patlolla’s Ionic1 Datepicker. But while I searched for a similar option, I found that either they are not compatible with angular or their use case is not match up with what we required. So then we decided to build something our own, we have implemented it nicely in our project, then we thought to make it as a library and make it open source. Ionic4 Datepicker Component is still in development in terms of configuration options and functionality.

Currently here is how it looks like:-

Ionic4-Datepicker-component

How to Use it

Step1: Install

npm i @logisticinfotech/ionic4-datepicker moment

Step2: Import it in your module and in import array

import { Ionic4DatepickerModule } from
    '@logisticinfotech/ionic4-datepicker';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Ionic4DatepickerModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage]
})

Step3: In your component declare your model variable and date picker options

myDate = 'YOUR_DATE'; (assign your selected date to this Object)
let disabledDates: Date[] = [
      new Date(1545911005644),     
      new Date(),     
      new Date(2018, 12, 12), // Months are 0-based, this is August, 10th.     
      new Date('Wednesday, December 26, 2018'), // Works with any valid Date formats like long format     
      new Date('12-14-2018'), // Short format
];
datePickerObj: any = {
  inputDate: new Date('2018-08-10'), // default new Date()
  fromDate: new Date('2016-12-08'), // default null
  toDate: new Date('2018-12-28'), // default null
  showTodayButton: false, // default true
  closeOnSelect: true, // default false
  disableWeekDays: [4], // default []
  mondayFirst: true, // default false
  setLabel: 'S',  // default 'Set'
  todayLabel: 'T', // default 'Today'
  closeLabel: 'C', // default 'Close'
  disabledDates: disabledDates, // default []
  titleLabel: 'Select a Date', // default null
  monthsList: ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
  weeksList: ["S", "M", "T", "W", "T", "F", "S"],
  dateFormat: 'YYYY-MM-DD' // default DD MMM YYYY
  clearButton : false , // default true
  momentLocale: 'pt-BR', // Default 'en-US'
  yearInAscending: true, // Default false
  btnCloseSetInReverse: true, // Default false
  btnProperties: {
    expand: 'block', // Default 'block'
    fill: '', // Default 'solid'
    size: '', // Default 'default'
    disabled: '', // Default false
    strong: '', // Default false
    color: '' // Default ''
  },
  arrowNextPrev: {
    nextArrowSrc: 'assets/images/arrow_right.svg',
    prevArrowSrc: 'assets/images/arrow_left.svg'
  }, // This object supports only SVG files.
  highlightedDates: [
   { date: new Date('2019-09-10'), color: '#ee88bf', fontColor: '#fff' },
   { date: new Date('2019-09-12'), color: '#50f2b1', fontColor: '#fff' }
  ] // Default [],
  isSundayHighlighted : {
   fontColor: '#ee88bf' // Default null
  } // Default {}
};

Available Options are:

  1. inputDate(Optional) Date: If default date is not provided and want to start Datepicker at
    specific Month/Year, You can give the date in Date | string | moment object to this property.
    Default value is new Date(). Once the date is set then this property will be ignored.
  2. fromDate(Optional) Date: if provided date object here, previous dates from this date will be
    disabled.
  3. toDate(Optional) Date: if provided date object here, future dates from this date will be
    disabled.
  4. showTodayButton(Optional) Boolean: boolean parameter relates to Today button hide/show, default
    value is true.
  5. closeOnSelect(Optional) Boolean: very useful option to understand. Its default value is false. If
    it’s false Set button will be visible, and the user has to click on Set to close model and get selected
    date value. If it’s True, the Set button will be hidden and On Selection of Date, Model will be
    automatically close and Date value will be passed to our component.
  6. disableWeekdays(Optional) array: Accepts number array 0(Sunday) to 6(Saturday).
    eg. [0, 3, 6] this will disable Sunday, Wednesday, Saturday in the whole calendar.
  7. mondayFirst(Optional) Boolean: To show Monday as the first day Set to true. The default value is
    false, which means Sunday is the first day by default.
  8. setLabel(Optional) Label: The label for the Set button. The default value is “Set”.
  9. todayLabel(Optional) Label: The label for Today button. The default value is “Today”.
  10. closeLabel**(Optional) Label: The label for Close button. The default value is “Close”.
  11. disabledDates(Optional) array: pass dates array if you like to make them disable from the
    selection.
  12. titleLabel(Optional) Label: By default, no title will be shown. If passed it will set model
    title.
  13. monthsList(Optional) array: To change the language or change month texts. You can create an array
    like below:
    [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”,
    “November”, “December”];
    The default values are:
    [“Jan”, “Feb”, “March”, “April”, “May”, “June”, “July”, “Aug”, “Sept”, “Oct”, “Nov”, “Dec”];
  14. weeksList(Optional) array: To change the language or change week text. You can create an array like below:
    [“Sun”, “Mon”, “Tue”, “Wed”, “thu”, “Fri”, “Sat”];
    The default values are: [“S”, “M”, “T”, “W”, “T”, “F”, “S”];
  15. dateFormat(Optional) String: This is the format used in the template. Defaults to `DD MMM
    YYYY`.  For how to format date, and which format is accept see
    below site: https://angular.io/api/common/DatePipe
    From version 1.0.8 moment js is implemented so please check here for valid date
    formats
  16. clearButton(Optional) Boolean: Boolean to specify whether to show the `x` button in ion-input or
    not, which will be used to clear value. the default value is true.
  17. yearInAscending(Optional) Boolean: Default value is false, if set to true years drop down will
    show years in ascending order.
  18. momentLocale(Optional) String: Default value is `en-US`. So if you would like to use ’06 Fev 2019
    ‘ and formate is DD MMM YYYY then you need to set momentLocal:’pt-BR’ in order to make it work.
  19. btnCloseSetInReverse(Optional) Boolean: Default value is false , if set to true then buttons
    sequence will be Set/Close instead of Close/Set.
  20. btnProperties(Optional) Object: this object set the button defaults properties like expand, fill,
    size, disabled, strong, and color. Default object of button properties as below :
    btnProperties:
    {
    expand = ‘block’;   // “block” | “full”
    fill = ‘solid’;             // “clear” | “default” | “outline” | “solid”
    size = ‘default’;      // “default” | “large” | “small”
    disabled = false;   // true | false
    strong = false;       // true | false
    color: ‘primary’   // “primary” | “secondary” | “tertiary” |
    // “success” | “warning” | “danger” | “light” | “medium” | “dark”
    }
  21. arrowNextPrev(Optional) string: This property is to set src for the icon of next and previous
    button. This option reacts on only `SVG` files. In this option, we should write the path of SVG files.
    Default is set to arrow-back and arrow-forward.
  22. highlightedDates(Optional) array: Using this property we can highlight the dates in
    datePicker.So, we can easily find selected dates in datePicker. In this, we can pass the date and color
    which you can use for highlight date.
    for example :
    highlightedDates: [
    { date: new Date(‘2019-09-10’), color: ‘#ee88bf’, fontColor: ‘#fff’ },
    { date: new Date(‘2019-09-12’), color: ‘#50f2b1’, fontColor: ‘#fff’ }
    ]
  23. isSundayHighlighted(Optional) object : Using this property we can hightes all sunday of month, and you can set any color for highlight sunday.
    for example :
    isSundayHighlighted :{
    fontColor: ‘red’
    }

Step4: Then in your html simply use it as below
Use Ionic4-datepicker As a Directive (Preferred)

<ion-input readonly [(ngModel)]="mydate"
    [liIonic4Datepicker]="datePickerObj"
    (ionchange)="myFunction()">
</ion-input>

Use Ionic4-datepicker As a Component

<li-ionic4-datepicker [(ngModel)]="mydate"
    [inputDateConfig]="datePickerObj"></li-ionic4-datepicker>

Programatically way

Please follow as below to open Datepicker Modal and get date onDismiss. (standard ionic way ModalController
implementation)

import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';

import { Ionic4DatepickerModalComponent } from 'ionic4-datepicker';

@Component({
  selector: 'app-datepicker-button',
  templateUrl: './datepicker-button.page.html',
  styleUrls: ['./datepicker-button.page.scss'],
})
export class DatepickerManuallyPage implements OnInit {

  datePickerObj: any = {};
  selectedDate;

  constructor(
    public modalCtrl: ModalController
  ) { }

  ngOnInit() {
    this.datePickerObj = {
      dateFormat: 'YYYY-MM-DD'
    };
  }

  async openDatePicker() {
    const datePickerModal = await this.modalCtrl.create({
      component: Ionic4DatepickerModalComponent,
      cssClass: 'li-ionic4-datePicker',
      componentProps: { 
         'objConfig': this.datePickerObj, 
         'selectedDate': this.selectedDate 
      }
    });
    await datePickerModal.present();

    datePickerModal.onDidDismiss()
      .then((data) => {
        console.log(data);
        this.selectedDate = data.data.date;
      });
  }
}

Note: For model to open as above image please add below css in your projects global.scss

.li-ionic4-datePicker {
    .modal-wrapper {
        height: 470px;
        max-height: 100%;
        width: 312px;
    }
}

Want to use different color schema? please put css as below example to affect only inside datepicker modal.
Basically you can override all ionic theme variables here and it will automatically apply accordingly.

.li-ionic4-datePicker {
  .modal-wrapper {
      height: 470px;
      max-height: 100%;
      width: 312px;
      --ion-color-primary: red; // This Variable used for the change of colour ion-datepicker only.
      --ion-color-primary-tint: rgb(214, 153, 153); // This Variable changes the tint colour of background when click button.
      ion-button {
          // --ion-color-primary: green; // This Variable used for the change colour of buttons only.
          // --ion-color-primary-tint: lightgreen; // This Variable changes the tint color of background when click buttons.
          // --border-radious: 0px; // This Variable changes the border radious of buttons.
          // button customization css write here...
      }
  }
}

Please post any issue you found in GitHub or in the comment box below. Also request feature if you like to see it in this library.
This is our first Ionic/Angular Library so please suggest any improvements in code base also.

Looking forward to get community feedbacks.

# Breaking change in version 1.0.8

Due to issue in date formate `dd-MM-yyyy`, we have used moment js to solve it. Now this need to be
changed to `DD-MM-YYYY`
We are moving away from angular DatePipe so now only moment js date formats are valid.

so people who are using `dd` will require change it to `DD`

Change Log

Version: 1.1.0

> added option: yearInAscending
> added option: momentLocale
> github issue #8 solved

Version 1.2.0

> added option: inputDate, btnCloseSetInReverse, btnProperties
   For documentation please check above description
> github issues
 #10, #11, #14, #15 solved or supported
> for desktop users, button style fixed and cursor pointer added

Version 1.3.0

> added option: arrowNextPrev
   For documentation please check above description
> github issues
 #17 is supported
> Added in built scroller to select Month and Year. To go back user can tap on titlebar.

Version 1.4.0

> added option: highlightedDates
   For documentation please check above description
> github issues
 #23 and #25 is supported

Version 1.4.1

> Now if input is blank then current date will not be selected by default.
> fixed issues
 #28

Version 1.4.2

> Highlighted date fontColor support added.
> fixed issues
 #30 #31 #32, inputDate not selected bug fixed

Version 1.4.3

> Highlighted all Sunday of month support added.
> fixed issues
 #37

Version 1.4.4

> padding to ion-padding class updated

Example repo you can find here ionic4-datepicker-example

Don’t miss the next post!

Loading

Related Posts