Issue about Date Range logic

@gekyume119 wrote:

Hello everyone !! Excuse my English
I’m new to ionic and was trying to make a Todo App with ionic 4.
For Todoes i setup a startingDate and an EndDate but i want to control date Range by prevent user after selecting a starting date, he will not be able to select an endDate that comes before the StartingDate

<ion-header>
  <ion-toolbar text-justify color="primary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tache/tabs/todo"></ion-back-button>
    </ion-buttons>
    <ion-title>Add Todo</ion-title>
    <ion-buttons slot="primary">
      <ion-icon name="save" slot="icon-only"></ion-icon>
      <ion-button (click)="onCreateTodo()"></ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form [formGroup]="form">
  <ion-grid>

    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Title: </ion-label>
          <ion-input type="text" autocomplete autocorrect formControlName="title"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>

    <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Description: </ion-label>
          <ion-textarea rows="4" formControlName="description"></ion-textarea>
        </ion-item>
      </ion-col>
    </ion-row>

    
      <ion-row>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating">Starting at: </ion-label>
          <ion-datetime 
          [min]="newTodo.dateFrom.toISOString()" 
          displayFormat=" DD MMM YYYY" 
          formControlName="dateFrom"
          #startDateCtrl></ion-datetime>
        </ion-item>
      </ion-col>
      <ion-col size-sm="6" offset-sm="3">
        <ion-item>
          <ion-label position="floating"> Ending at : </ion-label>
          <ion-datetime 
          [min]="startDateCtrl.value" 
          displayFormat=" DD MMM YYYY "
          formControlName="DateTo"></ion-datetime>
        </ion-item>
      </ion-col>
    </ion-row>
    
    
  </ion-grid>
</form>

</ion-content>

And my TypeScript file is below

import { Component, OnInit, Input } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { TacheService } from '../tache.service';
import { Router } from '@angular/router';
import { LoadingController } from '@ionic/angular';
import { Tache } from '../tache.model';
// import * as moment from 'moment/moment.js';


@Component({
  selector: 'app-new-todo',
  templateUrl: './new-todo.page.html',
  styleUrls: ['./new-todo.page.scss'],
})
export class NewTodoPage implements OnInit {
    form: FormGroup;
    newTodo: Tache;
  constructor(
    private tacheService: TacheService,
    private router: Router,
    private loaderCtrl: LoadingController) { }

  ngOnInit() {
    // add formGroup that takes a javascript object
    this.form = new FormGroup({
         title: new FormControl(null, {
           updateOn: 'blur',
           validators: [Validators.required]
         }),
         description: new FormControl(null, {
          updateOn: 'blur',
           validators: [Validators.required, Validators.maxLength(500)]
         }),
         dateDu: new FormControl(null, {
          updateOn: 'blur',
           validators: [Validators.required]
         }),
         dateAu: new FormControl(null, {
           updateOn: 'blur',
           validators: [Validators.required]
         })
    });
  }

  getDummyDate() {
    return new Date();
  }

  onCreateTodo() {
    if (!this.form.valid) {
      return;
    }
    this.loaderCtrl.create(
      {message: 'Creation en cour ...'}
    ).then(loadingEl => {
      loadingEl.present();
      this.tacheService.addTache(
      this.form.value.title,
      this.form.value.description,
      new Date(this.form.value.dateFrom),
      new Date(this.form.value.dateTo)
      )
      .subscribe(() => {
        loadingEl.dismiss();
        this.form.reset();
        this.router.navigate(['/tache/tabs/todo']);
        // console.log('Ajout d\'un nouveau Todo'))
      });
    });



  }


}

Posts: 1

Participants: 1

Read full topic