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()
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'm new for SAPUI5, I'm using plan calendar for assigning some schedule for employee.Though i'm able to do it but if i want to update already scheduled task then in the popup small calendar gets opened. In that calendar i want to provide validation for start date and end date as if user selects start date then automatically for end date calendar dates less than start date should get disabled.
Sharing screen shot of planning calendar and it's reference documentation.
Planning calendar documentation
Help will be appreciated.
Can't u use the 'change' event of sap.m.DatePicker? If the value changes, set the 'minDate' property of the datepicker.
Fragment
<DatePicker id="idStartDate" change="onChangeStartDate"/>
<DatePicker id="idEndDate" change="onChangeEndDate"/>
Controller - don't forget to define sap.ui.core.Fragment in controller definiton
// don't forget to define Fragment in controller
onChangeStartDate: function(){
var startDate = Fragment.byId("fragId, "idStartDate").getDateValue();
Fragment.byId("fragId, "idEndDate").setMinDate(startDate);
},
onChangeEndDate: function(){
var endDate = Fragment.byId("fragId, "idEndDate").getDateValue();
Fragment.byId("fragId, "idStartDate").setMaxDate(endDate);
}
Just use binding. I will assume your first input field is bound against {StartDate} and the second against {EndDate}
Then you can bind the second DatePickers minDate Property to {StartDate} like this:
<DatePicker dateValue="{StartDate}"/>
<DatePicker dateValue="{EndDate}" minDate="{StartDate}"/>
(BTW: you could use sap.ui.unified.Calendar for Date Range Selections: Explored Example)
Is there a way to set the calendar picker in Silverstripe to not be able to select dates that are in the past?
As far as I can tell it uses the jQuery DatePicker but I am unsure how to restrict the past dates.
DateField::create("Date","Date")
->setAttribute('placeholder','eg 2017-01-01')
->setConfig('showcalendar', true),
You can pass configuration options to the datepicker:
DateField::create("Date","Date")
->setConfig('showcalendar', true)
->setConfig('min', date('Y-m-d'))
->setDescription('')
->setAttribute('data-number-of-months', 3);
->setConfig('min', date('Y-m-d')) tells jQueryUI picker to use a minimal date (today). With data-attributes you can also pass other configuraton to the picker, in the above case it shows three months at once. This will be passed to datepicker config.
Note that the datepicker camel case config "numberOfMonths" has to be written with hyphens like 'data-number-of-months'.
See also datepicker configuration
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>