I need to use datetime with a placeholder that says "select your date of birth" when the datepicker is open I need the start date to be 1980, The only way I can do this currently is to set the value of the input to be 1980 but then my placeholder does not display.
Is this possible to achieve with ion-datetime ?
<ion-datetime
displayFormat="DD/MM/YYYY"
placeholder="select your date of birth">
</ion-datetime>
you can display a label at start & then when you click on the label (on focus event or click) you set some attribute to true (you have to set it to false at start) & then when it's true you display the date-time picker instead using *ngIf (also *ngIf for the label).
<ion-item>
<ion-label floating color="secondary">Select Your Date of Birth</ion-label>
<ion-datetime [(ngModel)]="dataofbirthday" displayFormat="DD / MMMM / YYYY" pickerFormat="DD / MMMM / YYYY" monthNames='January,February,March,April,May,June,July,August,September,October,November,December' [min]="mindate" max="2019-12-31" cancelText =Cancel doneText=Select></ion-datetime>
</ion-item>
Related
I have a date picker & above it I have 1 button as Done. On clicking this button I print the date picker date.
When I scroll the date picker and print date, it works fine. Below is the code I have
print("date selected===\(myDatePicker.date)")
The problem comes when I don't scroll the datepicker and click done button.
The scenario is I have set datepicker maximumDate as year 2000 (currentYear-18). Below is code I have used.
var dayComp = DateComponents()
currDate = Date()
dayComp.year = -18
currDate = calendar.date(byAdding: dayComp, to: currDate)!
mDateFrom.maximumDate = currDate
Now as datepicker is going back 18 years, I see date picker with date as 25/Jul/2000 however when I click Done button it print today date only.
It gives proper date only when I scroll datepicker.
Any idea why this is happening?
I believe you need to set the default date displayed by the date picker once you create a datePicker based on what you want it to be. Because the default value of this property is the date when the UIDatePicker object is created and that's why whenever you print the value of date picker without spinning, it shows you the current date however if you spin the datePicker, this property is being set properly and you get the right date printed.
//you can use date property to set or get
myDatePicker.date = yourFormattedDateHere
Setting date property animates the date picker by spinning the wheels to the new date and time, if you don't want any animation to occur when you set the date, use the setDate(_:animated:) method, passing false for the animated parameter.
I have problem i try set the default date is today end disable day passed.
But when i set the default date is today i must convert date to string. So i can't calculator this.
Some body help me set the default date is today and calculator date. Thanks for reading my topic!
This is my code:
this.startDate = new Date().toISOString();
this.minDate = new Date().toISOString();
<ion-datetime
displayFormat="MMM DD, YYYY HH:mm"
[min]="minDate"
[(ngModel)]="startDate"
>
</ion-datetime>
From ionicv2 docs
https://ionicframework.com/docs/api/components/datetime/DateTime/
Ionic uses the ISO 8601 datetime format for its value. The value is
simply a string, rather than using JavaScript's Date object.
Additionally, when using the ISO datetime format, it makes it easier
to serialize and pass within JSON objects, and sending databases a
standardized format which it can be easily parsed if need be.
So, you can get the ISO string date by
startDate: String = new Date().toISOString();
and use it in the view like so
<ion-datetime
displayFormat="MMM DD, YYYY HH:mm"
[(ngModel)]="startDate"
>
If you want to disable backdated date, you can try this
min="2016-10-31"
and also you can specify the maxDate by
max="2020-12-12"
in your ion-datetime directive
I need to click on a date that is 62 days later than the current date.
The next button for the months is clickable so I have been able to move the calendar to 2 months later but unable to select the date.
Eg if the current date is 4 July then I need to select 6th Sept.
My code at the moment looks somewhat like this.
b.element(:name, "policyperiod_endDate").click <-- datetime picker's click
b.element(:xpath, "(//button[#type='button'])[50]").click <-- next month
b.element(:xpath, "(//button[#type='button'])[50]").click
b.element(:link,"06").click <--doesnt select 08
b.element(:xpath, "(//button[#type='button'])[68]").click <-selects fixed cell n
how to select 06?
The outer HTML is like this:
input type="text" class="pull-left pdr35 ng-isolate-scope ng-pristine ng- invalid ng-invalid-required" datepicker-popup="yyyy-MM-dd" is-open="datePickerOpts.datepickers.policyperiod_startdate[1]" ng-model="policyIVOs.policyEndDate" name="**policyperiod_endDate**" datepicker-options="dateOptions" show-button-bar="false" close-on-date-selection="true" show-weeks="false" ng-click="open($event, 'policyperiod_startdate', 1)" min-date="policyEndMin" max-date="policyEndMax" required="" readonly=""
Is it possible in eonasdan's bootstrap 3 datetimepicker to change the dayViewHeaderFormat to show decades or a drop-down menu to choose a year quickly?
Because when someone wants to insert their birthday, it might take a lot of clicks to select the correct year and date. Is there an option to quickly select the correct year? If so, how would this work?
Yes, this is possible using the viewMode function. From the documentation:
viewMode(newViewMode)
Takes a string. Valid values are 'days', 'months', 'years' and 'decades'
For example:
$('#birthday_years').datetimepicker({
format: 'Do of MMMM, YYYY',
defaultDate: new Date(1990, 0, 1, 00, 01),
viewMode: 'years',
});
Here, I've initialised the defaultDate to 1990. You can, of course, change this or use a placeholder to display a text in the input field. Like so: <input ... ... placeholder="Pick your birthday" />.
I've also formatted the date. You can change the date format with these options.
Demonstration of the final result:
> GO TO DEMO
I want to compare two dates. I want to make a condition which checks if the date in my database is older than the date in two days.
Here are my two variables:
{<f:format.date format="d.m.Y">+2 days</f:format.date>}
{<f:format.date format="d.m.Y">{day.valid}</f:format.date>}
I want to solve this in the template, not in the model or the controller.
Assign your date to variable »yourdate«.
<f:if condition="{f:format.date(date: '+2 days', format: 'Y-m-d')} < {f:format.date(date: yourdate, format: 'Y-m-d')}">
<f:then>
yourdate is smaller than now + 2 days.
</f:then>
<f:else>
yourdate is greater than or equal to now + 2 days.
</f:else>
</f:if>
Here is my current solution which adds in a current date and does some calculations with the date from the content.
In the controller, add the current date to the data:
$this->view->assign('date_now', new \DateTime());
This is available as {date_now} in fluid then:
<f:if condition="{f:format.date(date: date_now, format: '(Y-m-d)')} > {f:format.date(date: '{event.date}-4 weeks', format: '(Y-m-d)')}">
<f:then>
<p>Event date is past</p>
</f:then>
<f:else>
<p>Event date is upcoming</p>
</f:else>
</f:if>
Note how on the right side, where some calculation is done, additional quotes and curly brackets come in ('{event.date}-4 weeks').
PS I prefer the Y-m-d format to U for a date comparison, as we don't want to compare the current time – just the date.
Convert the date to an unix timestamp using format="U" and compare them. You need to add a variable which contains the comparing date.
<f:if condition="{f:format.date(date: day.valid, format: 'U')} > {f:format.date(date: date_compare, format: 'U')}">
Date is valid
</f:if>
Actually: because DateTime has a getTimestamp method (http://php.net/manual/en/datetime.gettimestamp.php, since 5.3.0) which perfectly conforms to the supported getter method naming in Fluid, the following is perfectly possible. Given $date1 and $date2 are both DateTime instances assigned to the template:
<f:if condition="{date1.timestamp} < {date2.timestamp}">...</f:if>
Will compare the two dates as unix timestamp integers without the need to format the dates. So for your case, assign a $date = (new \DateTime('now'))->modify('+2 days'); from your controller action and compare to that in Fluid. Or just assign the time() timestamp and compare directly to that, skipping the DateTime usage.