Ionic4: ion-datetime cancelText and doneText won't be overriden - date

There is something wrong with the ion-datetime component where cancelText and doneText are ignored and therefor the default values Cancel and Done are always used instead.
This is both a problem when overriding them in a template or by code.
Any help would be appreciated!
<ion-datetime displayFormat="D MMM YYYY" mode="ios" cancelText="TEST" doneText="TEST" #date></ion-datetime>

Related

Ionic ion-datetime - Can't bind to 'first-day-of-week'

With the code below, I get a "Can't bind to 'first-day-of-week' since it isn't a known property of 'ion-datetime'."
But it is a known property in the documentation: https://ionicframework.com/docs/api/datetime#setting-the-first-day-of-the-week
Also if I'm not using a binding and setting it in the template, it is working:
first-day-of-week="1"
How come I get this issue? I'm using the latest version of ionic 6.
<ion-datetime
[locale]="locale"
[first-day-of-week]="firstDayOfWeek"
#datetimestart
[value]="startDateValue"
(ionChange)="startDateChanged(datetimestart.value)">
</ion-datetime>
do this
<ion-datetime
[locale]="locale"
first-day-of-week="0" <---- deafult start from Sunday
#datetimestart
[value]="startDateValue"
(ionChange)="startDateChanged(datetimestart.value)">
</ion-datetime>
and number "1" to start from Monday
first-day-of-week="1"
just change number for other days

Open ion-datetime in local timezone

I've got an Ionic app that dynamically creates a form that sometimes has an ion-datetime in it. The date time is also optional on the form, so it is not have an initial value set by me.
<ion-datetime *ngIf="question_definition.component == 'date'"
displayFormat="DD MMM, YYYY HH:mm"
pickerFormat="DD MMM YYYY HH:mm"
[formControlName]="question_definition.question">
</ion-datetime>
Currently when a user taps on the element the data picker appears and is set to the time using UTC. I'm in New Zealand and want it to use +12:00 time (at the moment, until daylight saving starts).
How do I get an ion-datetime without a value to open up and display the time in my local timezone?
After digging alot... Found answer.
ion-datetime apparently has an undocumented attribute called initialValue. So, if you want to get a different timezone, you can do this
.html
<ion-datetime [initialValue]="myInitialTime" pickerFormat="HH:mm" [(ngModel)]="myTime"></ion-datetime>
.ts
this.myInitialTime = localDate
You can do it when you start the formController with a new Date (), in this way it will take the local time of the device.
Ex: question: new Date()

how to set value in datePicker in ionic 2 automation testing appium

I am working on ionic 2, for automation testing i have used appium and webdriver.io , i'm able to set value where input type is password or email, generally text input type.
<input id="i.email" type="email">
and setting value using
client.setValue('//*[#id="i.email"]', username)
but i want to set value into date picker but i'm unable to do so.. my code is as below..
<ion-datetime id="d.fromDt" pickerFormat="MMM DD YYYY"
[(ngModel)]="fromDate" doneText="ok" cancelText="clear"
displayFormat="DD - MM - YYYY"> </ion-datetime>
and i have tried setting value using
-- client.setValue('//*[#id="d.fromDt"]', 'May 22 2018')
-- client.element('//*[#id="d.fromDt"]').setValue('May 22 2018')
but nothing is working. also getting response from appium invalid element state: Element must be user-editable in order to clear it. can anyone help me to solve this?

ion-datetime Ionic 3 show initial value

I am using ion-datetime for my project
https://ionicframework.com/docs/api/components/datetime/DateTime/
It is working nice, only problem i have to show inital value, that does not show??
<ion-datetime displayFormat="YYYY" name="LastServiceDate" value="2017"></ion-datetime>
I put value inside attibute it does not show inital?
There is no value property in ion-datetime in documentation, try ngModel.
<ion-datetime displayFormat="YYYY" name="LastServiceDate" [(ngModel)]="dateValueVar">
</ion-datetime>

Ionic 2 DatePicker Customize

Is it possible to customize standard ionic 2 datepicker to display day also, meaning when user selects date, month , year, it would be nice to see what day they are choosing.
Reference:
http://blog.ionic.io/ionic-2-fixing-date-inputs-for-the-mobile-web/
I don't understand exactly your question, but you can display more than 3 elements in a Ionic DateTime. This is just as easy as modify the pickerFormat component parameter. For example this code shows four elements to pick: hours, days, months and year.
<ion-datetime
pickerFormat="mm DD MMM YYYY"
...
>
</ion-datetime>
In the following link you will see all possible formats an options to set into the pickerFormat Input.
DateTime
I hope this can help.
If you want to display the short name of day in the datepicker you should use:
<ion-datetime
pickerFormat="mm DDD MMM YYYY"
...
>
</ion-datetime>