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
Related
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>
So I have a Ion-select with 3 static values and I would like for the 2nd one to be selected and displayed by default, doesn't sound to difficult or much of a problem right? Well so I tried simply adding selected near the ion-select option (displayed in the code below) just like they did with the example on the official document, but that for some reason had absolutely no effect and it is still not being displayed when I reload the page. Any idea on what could be the problem here?
<ion-item>
<ion-label>{{ "HOME.row_text" | translate }}</ion-label>
<ion-select [(ngModel)]="drive_option" (ionChange)="updateResult()">
<ion-select-option value=0.5>{{ "HOME.row_half" | translate }}</ion-select-option>
<ion-select-option value=1 selected>{{ "HOME.row_simple" | translate }}</ion-select-option>
<ion-select-option value=2>{{ "HOME.row_double" | translate }}</ion-select-option>
</ion-select>
</ion-item>
The matching between the model value and the dom value is type sensitive.
Vanilla dom properties are always strings and won't match the numeric drive_option. Try:
<ion-select-option [value]="0.5">{{ "HOME.row_half" | translate }}</ion-select-option>
It's because selected doesn't mean anything when you are using ngModel.
You need to set drive_option = 1 in the code and it will be reflected in the UI.
You probably don't need that (ionChange) either as any change will automatically update the drive_option value.
It would be helpful for you to go through the Angular documentation to understand how things work.
It was confusing for me too at the start (and still is regularly) but Ionic is not just about using Ionic, you need to take some time to get a core understand of Angular as well.
The concept is though that you are not building a traditional form, you are building a data model, and then letting angular two way bind that data - which is what the [()] means.
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()
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?
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>