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>
Related
Consider the following code
<v-date-picker
v-model="picker"
:first-day-of-week="6"
locale="fa"
></v-date-picker>
<v-date-picker
v-model="picker"
></v-date-picker>
As you can see in the following picture, In Persian calendar month starts by 12th which is the first day of May
Code Output, Left side is Persian calendar
I also have this problem, unfortunately it's an open bug in Vuetify:
[Bug Report] Problem with vuetify Persian datepicker year selection #11578
Which is a duplicate of:
[Bug] Date picker new month is started at the end of previous month in 'FA-local'.
Personally, I had to user vue-persian-datetime-picker. It's pretty good, a simple api and easily customizable. Still, I hope they fix the problem with v-date-picker
I am creating an acceptance test in Cypress that will run regularly, and I need that it enters the date from the datepicker (React, if it is important) as 1 year 1 month and 1 day from the day of creating the object (article). E.g. Today is April 22, 2020, and I want to get May 23, 2021 in the article created today, and tomorrow it would give the value of May 24, 2021 etc. Could anyone share any ideas of setting this up? I honestly googled and I have no ideas myself because I'm quite new to Cypress and feel more or less confident only in pretty straightforward things. :)
I'd guess that most date pickers will have an input element where the date can be typed.
Presuming the app uses a library date picker (so you don't need to test the picking of the date via button clicks), you can target that element and use the Cypress .type() command to enter the future date.
For example, the Material UI date picker docs has this input element
<input aria-invalid="false"
id="date-picker-inline"
type="text"
class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd"
value="08/18/2014">
so the steps would be something like
cy.visit('https://material-ui.com/components/pickers');
const targetDate = Cypress.moment()
.add(1, 'year')
.add(1, 'month')
.add(1, 'day')
.format('MM/DD/YYYY') // adjust format to suit the apps requirements
cy.get('input[id="date-picker-inline"]')
.clear()
.type(`${targetDate}{enter}`) // presume you need the enter key to trigger an event
Ref: Cypress.moment
This method was deprecated. You can use this method;
//click the date picker
cy.get('#datepicker').click();
//choose previous month
cy.contains('Prev').click();
//choose next month
cy.contains('Next').click();
//choose date 24
cy.contains('24').click();
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 have a plugin for show Gregorian and Jalali Datepicker:
https://amirkabirdataminers.github.io/ADM-dateTimePicker/
But I want show both in one calendar as in example.
exm: <span>Day Jalali<br>Day Gregorian</span>
please help me how can i this?
Check out https://github.com/babakhani/pwt.datepicker
It’s a good library that supports both Jalali and Gregorian Date format with many options. Also, you can customize its template if the design is important to you.
Is it possible to change the date format on the codename one Picker to show only the year in full e.g 2014 or 1990 ? As of now it has this date format "M/d/yy" which in turn gives a date such as "Oct 15 2014" to "10/15/14". Is there a way to change this date format?
This looks differently on the devices. The picker is implemented natively there.
In case anyone is still looking, The Picker has a getDate(), with this you can use the CNILIB on formating.
String datestring=(new SimpleDateFormat("yyyy-MM-dd")).format(picker.getDate())