Ionic datepicker for form

Ionic Framework ionic-v3
1

Hello,

I need add ionic datepicker inside in a ionic form. I have follow this doc for install datepicker but i don’t have any idea how i can use datepicker inside the form and i need some date validation also like normal form input. Assume i only need take a birth day and that filed cannot be edit using strings i mean date format. also that date should not be today day.

I used basic html to create my target page. Here is my code look likes

<form [formGroup]="registrationForm">
            <ion-item>
                <ion-label floating>Full Name</ion-label>
                <ion-input type="text" formControlName="userName"></ion-input>
            </ion-item>
            <p class="text-danger" *ngIf="registrationForm.controls.userName.touched && (registrationForm.controls.userName.invalid ||
            registrationForm.controls.userName.hasError('pattern'))">Enter valid username.</p> ......

And this is my ts file

this.registrationForm = this.fb.group({
      userName: [
        null, Validators.compose([Validators.maxLength(30), Validators.pattern('^[a-zA-Z]+$'), Validators.required])
      ], ................

Please help me to solve this matter :slight_smile: Thank you

2

@mohamedwahshey do you know any solution?

3

use this and u can try sending date and time as a string

1 Like
4

have you any idea about validation of this date picker? because i need set max year should be -16 from current year, and i need add required validation to this ion-datetime element :slight_smile:

5

you can set min max value like this
<ion-datetime displayFormat="MMMM YYYY" min="2016" max="2020-10-31" [(ngModel)]="myDate">
for more detail you can refer this

6

i need to do this in dynamic way

7 
year = null;
  currentTime = null;

  constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
    this.currentTime = new Date();
    this.year = this.currentTime.getFullYear();
    this.year = this.year - 16;

I did it using this line of code but now i have another problem

8

When i set my view like this

<ion-item>
            <ion-label>Birth of Date</ion-label>
            <ion-datetime displayFormat="MM/YYYY" formControlName="dob" pickerFormat="MMMM YYYY" min="1940" max="{{year}}">
            </ion-datetime>
            </ion-item>
            <p class="text-danger" *ngIf="registrationForm.controls.dob.touched && (registrationForm.controls.dob.invalid)">Enter your Date of birth</p>

and i add validation rule like this

 dob: [
        null, Validators.compose([Validators.required])],

I got error like

Uncaught Error: Unexpected value ‘DatePicker’ imported by the module ‘AppModule’. Please add a @NgModule annotation.

But i already include it app.module.ts file like this

import { ReactiveFormsModule } from '@angular/forms';
import { DatePicker } from '@ionic-native/date-picker';

@NgModule({
  declarations: [
    MyApp, NewsEventPage, ExecutiveMembersPage, HomePage, RegistrationPage, ContactPage
  ],
  imports: [
    BrowserModule, HttpClientModule, FormsModule, DatePicker, ReactiveFormsModule, IonicModule.forRoot(MyApp)
  ], .............

I dont know why it is show me like this

9

you can set the max year like this

<ion-datetime displayFormat="MMMM YYYY" [max]="year" [(ngModel)]="myDate">

you don’t need to have native datepicker. you can use the default datepicker and the datepicker do not allow string value for date. If you but max and min value you don’t need additional validation.

1 Like
10

After all i got working code if some face same problem i had, here is my solution.

If you need DatePicker use this code and you can edit it as you wish

       <ion-item>
            <ion-label>Birth of Date</ion-label>
            <ion-datetime displayFormat="MM/YYYY" formControlName="dob" pickerFormat="MMMM YYYY" min="1940" max="{{year}}">
            </ion-datetime>
       </ion-item>

Here i have two way data bind variable call year in max="" property that year is calculated by the typescript file and send here the final value.

Those codes are

year = null;
currentTime = null;

in_some_method(){
// paste this code, should be include those are to constructor 

 this.currentTime = new Date();
 this.year = this.currentTime.getFullYear();
 this.year = this.year - 16;

}

And i have use Reactive Form in angular so i have set validation like

dob: [
        null, Validators.compose([Validators.required])],

So this is the completed code which i successfully combined.
Like Mr. @haniniw said you don’t need any extra library. Thank you Mr. @haniniw and also thank you Mr. @mohamedwahshey :slight_smile:

11

I think you might like this library https://github.com/HsuanXyz/ion2-calendar

1 Like
12

this is cool bro :slight_smile: it has very wide control and nice interface

13

However i have some small un solved problem here, when i not validate some form control element then that time give me red color underline indication that fields are not valid, i also have set data picker as required field but that not shows me any red underline error, i see that also happens to ion-select element.