CODEWITHSUNDEEP
htmldatetimeionic-frameworkionic4
Miro
Miro

Reputation: 63

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

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'));
    }

Upvotes: 2

Views: 2700

Answers (3)

Vijay Kumawat
Vijay Kumawat

Reputation: 963

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

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

Upvotes: 2

Ulrich NGAKUI NGAHA
Ulrich NGAKUI NGAHA

Reputation: 97

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.

Upvotes: 1

IreneC
IreneC

Reputation: 26

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");

Upvotes: 0

Related Questions