Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ionic-date-picker-fix-default

uptownjimmy3MIT1.0.3TypeScript support: included

A date picker for ionic

readme

This repo was forked in order to deal with the following scenario:

Makes current day (instead of the the max possible day) the default selected day when:

  • user opens datepicker modal
  • user selects a day that will be past the maxTestDate if user then selects nextMonth
  • user clicks nextMonth

Notes: previous functionality would have selected the highest possible day, which is confusing. Ideally, no day would be selected under these circumstances, but that seems difficult given the nature of the code logic.

How to use

1) Install using npm

    npm i ionic-date-picker-fix-default --save

2) Add it to your ngModule in app.module

 import { DatePickerModule } from 'ionic-date-picker-fix-default';
   imports: [
        IonicModule.forRoot(App),
        DatePickerModule,
    ],

3) Use the directive ion-date-picker in your html

    <span ion-date-picker-fix-default  [(value)]="localDate" [min]="localDate" clear class="ScheduleDate">
        <span>{{localDate | date}} <ion-icon name="clipboard" item-left ></ion-icon> </span>
    </span>

Dismiss the datepicker from the class


    import { DatePickerDirective } from 'ionic-date-picker-fix-default';

    @ViewChild(DatePickerDirective) private datepickerDirective:DatePickerDirective;

    public closeDatepicker(){
        this.datepickerDirective.modal.dismiss();
    }

Options

[value] - defines the initial value, can be two bindable as in [(value)].

[min] - minimum date that user is allowed to select. (not required)

[max] - maximum date that user is allowed to select. (not required)

[disabledDates] - An array of dates that should be disabled (not required)

[calendar] - A boolean that determines whether to show calendar or not. Defaults to true.

[markDates] - An array of dates that should be marked with background color (not required)

(ionChanged) - an event emitter that returns the date as a $event.

(ionCanceled) - an event that is raised when the cancel button is activated. Returns no data.

(ionSelected) - an event that is raised when a date is selected

[headerClasses] - a bridge to the header classes of the directive using ngClass (string, array or object) (not required)

[bodyClasses] - a bridge to the date classes of the directive using ngClass (string, array or object) (not required)

[modalOptions] - a modal is used to display the picker to configure the animation or other options you may use this

[locale] - for translating the calendar. Avaliable local is en-US, en-UK, he-IL, pt-BR, ru-RU, de, fi, fr-FR, zh-TW, zh-CN, ja-JP. Please note en-US locale starts the calendar with monday and en-UK starts it with sunday

[localeStrings] - if you dont want to use the built translations - accepts an object { weekdays: string[], months: string[], monday:boolean }, For example:

        ```
        {
            monday:true,
            weekdays: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        },
        ```

[okText] - text for the ok button

[cancelText] - text for the cancel button

changelog

2.8.1 / 2019-05-16

  • Fixed a bug that would allow the user to select a date later than the maximum possible date when switching to the next month.

2.8.0 / 2019-03-22

  • Disabled months don't appear when moving between months

  • Further language support

2.7.2 / 2018-02-13

  • Updated to Ionic 3.9.2 and Angular 5.0.0

  • Fixed buttons having hard coded classes #48

  • Fixed weekday display on monday on first of month and prev month goes to first

2.7.1 / 2018-02-06

  • Merge pull request #57 from Jetro223/master

    Changes to de language to start from monday

2.7.0 / 2017-10-09

  • Merge pull request #52 from niklilland/ionSelect-fix

    Added ionSelected event that is raised when date is selected

  • Merge pull request #53 from anxorl/master

    Added Spanish language

    Added Galician language

2.6.7 / 2017-09-19

  • Fixed months selection starting from February

2.6.6 / 2017-09-18

2.6.5 / 2017-09-18

  • Fixed setting year/month doesn't recreate list.

2.6.4 / 2017-09-16

  • Made value property to be two way bindable. So [(value)]="data" can be used.

2.6.3 / 2017-09-06

  • Added readme to the new NPM package, renamed to ion-datepicker

2.6.2 / 2017-09-06

  • Fixed row/col issue css override

2.6.1 / 2017-09-04

  • Fixed --production problem which was caused due to ionic changing their modals.

2.6.0 / 2017-09-01

  • Added month/year/day views on click of the numbers
  • updated versions in demo

2.5.1 / 2017-08-04

  • Fix a bug related to selecting a weekday
  • Dependencies update

2.4.9 / 2017-07-21

  • Merge pull request #32 from Askrenteam/master Added french locale
  • updated README locale list
  • Added french(fr-FR) locale
  • Merge pull request #30 from pauloedsr/MarkDate Mark date
  • Create method to mark as array of Dates. Set a background-color;
  • Added mark a date

2.4.8 / 2017-07-15

  • Removed angular date pipe dependency(ios compability)
  • Fixed hover bug

2.4.7 / 2017-07-15

  • fix for ios tap problem

2.4.6 / 2017-07-15

  • Added disabled dates
  • Updated readme format

2.4.5 / 2017-07-07

  • Added custom locale and monday options for it

2.4.3 / 2017-07-06

  • Updated versions to angular 4.1.3

2.4.2 / 2017-07-03

  • Limited weeksday to 2 for deutsch

2.4.1 / 2017-06-28

  • Fixed bug with initial date
  • Changed pictures in readme

2.4.0 / 2017-06-21

  • Remove calendar & full options
  • Fixed iPad problems
  • Fixed the padding issues in various devices

2.3.4 / 2017-06-10

  • Added zh-CN/TW support and monday on en-US

2.3.3 / 2017-05-12

  • Removed BrowserModule

2.3.2 / 2017-04-29

  • Fixed for ionic 3.1.1

2.3.1 / 2017-04-28

  • Fixed for ionic 3.1.0

2.3.0 / 2017-03-12

  • Fixed padding for various devices
  • Merge pull request #13 from ross-nordstrom/master Calendar has weekdays, and is aligned to weekday columns
  • feat(calendar): include dayOfWeek headers in calendar
  • fix(calendar): add placeholder days at start of calendar so dates align with weekdays
  • added an example how to dismiss the datepicker

2.2.12 / 2017-03-01

  • Added an option to dismiss the datepicker from the directive

2.2.11 / 2017-02-18

  • Moved all depenedencies to developer dependencies

2.2.10 / 2017-02-18

  • AOT compability

2.2.6 / 2017-02-15

  • Added languages types and upgraded to ionic 2.0.1

2.2.5 / 2017-02-09

  • Merge pull request #7 from venalil/finnish_support Added support for Finnish

2.2.4 / 2017-02-04

  • Added ionCanceled

2.2.3 / 2017-02-04

  • Remove emit from cancel

2.2.2 / 2017-01-28

  • Changed buttons text
  • Update to ionic 2.0 final version

2.2.1 / 2017-01-21

  • Added german support

2.2.0 / 2017-01-21

  • Language translation and min fix

2.1.2 / 2017-01-15

  • Removed colors as important in css

2.1.1 / 2017-01-15

  • Fixed previous month/next month moving issue

2.0.3 / 2017-01-12

  • Exposed component & directive
  • Updated texts

2.0.0 / 2016-12-30

  • Added modal options
  • Display html example
  • Fixed to work ionic rc4
  • Various CSS fixes
  • Demo added
  • Readme update

1.2.0 / 2016-10-23

  • Added a calendar display mode