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>
Related
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
I don't know why I can't wrap my head around how to use Material UI's DatePicker. It seems that the documentation is not complete? Am I correct?
Here is the basic example I have:
import {DatePicker, MuiPickersUtilsProvider} from '#material-ui/pickers';
import DateFnsUtils from "#date-io/date-fns";
... somewhere in the render:
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
id="date"
value="2017-05-24"
allowKeyboardControl={false}
autoOk={true}
/>
</MuiPickersUtilsProvider>
At first I got errors that 'n' something something wasn't working, and that is because either date-io or date-fns (the newer versions) wheren't supported. After downgrading.. I got told that the _onChange is not a function. I randomly thought that I could add an empty onChange={()=>{}} to get that error to go away and it did. Now I am noticing that when I actually select a date, the DatePicker date displayed on my page doesn't update to the new date.
So.. am I supposed to supply an onChange event? Why is that not clear anywhere?
Also, is the date supposed to be updating by default, or is my onChange supposed to do that?
UPDATE:
So.. it turns out this page that documents Material UI Pickers has a "View Code" icon under their examples (https://material-ui.com/components/pickers/).
So that shows how to handle the onChange. I wish it was more obvious in this documentation.
Use #date-io/date-fns of v1.x
Pass required onChange callback:
function BasicDatePicker(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<DatePicker
value={selectedDate}
onChange={handleDateChange}
/>
);
}
Here is working example
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'm trying to use the placement option listed under input options for the NgbInputDatePicker.
I'd like to change the default bottom-left position of the popup datepicker, but when I try to use placement in the plunker example (https://ng-bootstrap.github.io/app/components/datepicker/demos/popup/plnkr.html) It doesn't change the position of the popup.
I've tried:
adding [placement]="top" inside of the input tag:
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [placement]="top" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
I've also tried just placing it in the parent div:
<div class="input-group" placement="top">
<input class="form-control" placeholder="yyyy-mm-dd"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
but neither seems to change the pop up position. I'm new to Angular, so perhaps I just have the syntax wrong somehow? I noticed other input APIs in the documentation that seemed to be used in this fashion so I thought it might work...
I'm using ng-bootstrap 1.0.0-beta.2, and Angular 4.3.4.
Thanks.
The problem is that you are using a binding to an expression (top means expression in [placement]="top") while I think that your intention is to use "top" constant. You can solve it using one of the 2 methods:
placement="top" (preferred)
[placement]="'top'" (notice additional quotes around top)
When specified properly the placement option works perfectly fine as illustrated in this plunker: http://plnkr.co/edit/NCNmpm3tlxapH4jZS08F?p=preview