How do I set my ion-datetime to today's date automatically without needing to click the picker beforehand?

user_14536296 0
Viewed 923

I want my date and time to automatically display the current date and time without needing to click the picker first.

The output I want is as below:

enter image description here

As above, I want my app to directly take the current date and time without the need of user to click the picker first.

All this while my current app uses the default code from ionic documentation where the user need to click the picker to see and choose current date or time like below:

enter image description here

enter image description here

My current html code is as follows:

<ion-list>
  <ion-list-header>
    <ion-label>
      Tarikh & Masa Kesalahan:
    </ion-label>
  </ion-list-header>   
    
      <ion-card>
        <ion-item>
          <ion-datetime dateFormat="MM/DD/YYYY" placeholder="MM/DD/YYYY" [(ngModel)]="form.tarikh_pemeriksaan"></ion-datetime>
          <ion-icon name="calendar" slot="end"></ion-icon>
        </ion-item>
      </ion-card>

  <ion-card>
    <ion-item>
      <ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z" placeholder="--:-- --" [(ngModel)]="form.masa"></ion-datetime>
      <ion-icon name="time" slot="end"></ion-icon>
    </ion-item>
  </ion-card>
</ion-list>

My typescript code is as below:

export class FcPage implements OnInit {

  form: any = {}
  premis: any = {};
  negeri: any;
  negeripenerima:any;
  daerah: any;
  daerahpenerima: any;
  daerahpenggerak: any;
  daerahindividu: any;
  loading: boolean;
  service: any;
  userdetail: any = {}
  perundangan: any = {};
  kesalahan: any = {};
  senarai_kesalahan: any = {};
  peraturan: any = {}
  projek: any = {};
  jpunca: any = {};
  checked : boolean = false;

  constructor(
    public api: ApiService,
    public modalController: ModalController,
    public router: Router,
    private userData: UserData,
  ) { 
    this.form = {}
    this.form.showCetak = false;
    this.senarai_kesalahan = JSON.parse(localStorage.getItem('jas_item_kesalahan'));
    //this.form.tarikh_pemeriksaan = new Date().toJSON().split('T')[0];
    this.form.tarikh_pemeriksaan = this.form.masa = new Date().toISOString();
  } 

    ngOnInit() {
      this.getNegeri();
      this.getNegeriPenerima();
      this.getDaerah();
      this.getDaerahPenerima();
      this.getDaerahIndividu();
      this.getDaerahAll();
      this.getJenisPunca();
      this.getUserDetail();
      this.getUsermisc();
      this.senarai_kesalahan = JSON.parse(localStorage.getItem('jas_item_kesalahan'));
    }
ionic4 ionic-framework datetime html
3 Answers

Change the initial value of form.tarikh_pemeriksaan and form.masa to current date

form.tarikh_pemeriksaan = form.masa = new Date().toISOString();
user_103303720

Before your contructor in your TypeScript file you can do this: export class TestPage { this.form.tarikh_pemeriksaan = new Date(); this.form.masa = new Date(); constructor(){} }

Then in your HTML file you call your variable in NgModel like you done before. I Think that will resolve your problem.

user_151038260

In your constructor in TypeScript you can do this to have actual date and time.

this.form.tarikh_pemeriksaan = moment(new Date()).format("YYYY-MM-DD");
this.form.masa = moment(new Date()).format("HH:mm");
user_121540500
Related