I have used p-calendar for date and time selection in project and set [minDate]="dateTime" so it is considering current date and time if I click on Today button but I need default time to 00:00 if I click on Today.
Here's my code of p-calendar
<p-calendar class="date" (onSelect)="onChangeDate()" [(ngModel)]="model.start_date"
[minDate]="dateTime" [showIcon]="true" [showTime]="true" showButtonBar="true"
[formControl]="form.controls['start_date']" [readonlyInput]="true">
You could remove [showTime]="true" to view 00:00:00 because I don't know if an event to customize button Today exists.
I am trying to add time picker using html5 default input field as
<input type="time" name="stat-time" value="" max="03:15:00 PM" />
Since i used 03:15:00 PM for the max value, whereas; whenever user adds 4:00 Pm, it generates error and show Please enter a value less than or equal to 15:15:00 PM..
Although it is correct for showing error, but i want to display this error in 12 hour format. like Please enter a value less than equal to 4:15:00 PM
In other words error should also be in same format which is taken by the input field.
Screenshot:
Any Suggestion will be appreciated. Thanks
Note: This error can only reproduce on browser using mobile devices.
I come up with a trick, as far as, this issue is only on mobile devices, i used the php to add the title to modify the error message.
like <input name="start_time" type="time" max="<?php echo $dt->format('H:i:s A'); ?>" value="" <?php echo $device != 'pc' ? 'title="Please enter a value less than equal to '.$dt->format('h:i:s A').'" : 'title="Enter time value"' ' ?>>
Now it compares 24hour format but will display the error message in 12 hour format.
Though i still want to have a proper method to handle this issue in html5.
I'm using Angular (4) and as you will see, I'm new to this game!
I've got data coming from a server backend ok, dates are being parsed into TS objects ok by my service.
However, when I include a date type input, I get a value of 'dd/mm/yyyy' rather that the date from the model (Browser is Chrome).
In my template:
<input [(ngModel)]="anObject.dateProperty"
type="date" name="dateProperty" required="required">
I have tried using placeholder and value attributes on the input element.
Else where in the same template file this displays the date as I would expect, so I'm comfortable the value is set:
{{anObject.dateProperty | date:'dd-MM-yyyy'}}
What is the Angular way of rendering the value of a date into an HTML input field?
Instead of separate option menus (one for year and one for month), how could I merge year and month into visually one single menu for a date attribute?
Each option would be a year/month pair, i.e.
2014 January
2014 February
Currently I have this code: f.date_select :begin_date, discard_day: true (to visually exclude the days).
You might like the following small jQueryUI code, which does exactly what you describe: http://lucianocosta.info/jquery.mtz.monthpicker/
In which format should I put the date and time, for use in the HTML5 input element with datetime type?
I have tried:
1338575502
01/06/2012 19:31
01/06/2012 19:21:00
2012-06-01
2012-06-01 19:31
2012-06-01 19:31:00
None of them seem to work.
For <input type="datetime" value="" ...
A string representing a global date and time.
Value: A valid date-time
as defined in [RFC 3339], with these additional qualifications:
•the literal letters T and Z in the date/time syntax must always be uppercase
•the date-fullyear production is instead defined as four or
more digits representing a number greater than 0
Examples:
1990-12-31T23:59:60Z
1996-12-19T16:39:57-08:00
http://www.w3.org/TR/html-markup/input.datetime.html#input.datetime.attrs.value
Update:
This feature is obsolete. Although it may still work in some browsers,
its use is discouraged since it could be removed at any time. Try to
avoid using it.
The HTML was a control for entering a date and
time (hour, minute, second, and fraction of a second) as well as a
timezone. This feature has been removed from WHATWG HTML, and is no
longer supported in browsers.
Instead, browsers are implementing (and developers are encouraged to
use) the datetime-local input type.
Why is HTML5 input type datetime removed from browsers already supporting it?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime
For what it's worth, with iOS7 dropping support for datetime you need to use datetime-local which doesn't accept timezone portion (which makes sense).
Doesn't work (iOS anyway):
<input type="datetime-local" value="2000-01-01T00:00:00+05:00" />
Works:
<input type="datetime-local" value="2000-01-01T00:00:00" />
PHP for value (windows safe):
strftime('%Y-%m-%dT%H:%M:%S', strtotime($my_datetime_input))
This article seems to show the valid types that are acceptable
<time>2009-11-13</time>
<!-- without #datetime content must be a valid date, time, or precise datetime -->
<time datetime="2009-11-13">13<sup>th</sup> November</time>
<!-- when using #datetime the content can be anything relevant -->
<time datetime="20:00">starting at 8pm</time>
<!-- time example -->
<time datetime="2009-11-13T20:00+00:00">8pm on my birthday</time>
<!-- datetime with time-zone example -->
<time datetime="2009-11-13T20:00Z">8pm on my birthday</time>
<!-- datetime with time-zone “Z” -->
This one covers using it in the <input> field:
<input type="date" name="d" min="2011-08-01" max="2011-08-15"> This
example of the HTML5 input type "date" combine with the attributes min
and max shows how we can restrict the dates a user can input. The
attributes min and max are not dependent on each other and can be used
independently.
<input type="time" name="t" value="12:00"> The HTML5 input type
"time" allows users to choose a corresponding time that is displayed
in a 24hour format. If we did not include the default value of "12:00"
the time would set itself to the time of the users local machine.
<input type="week" name="w"> The HTML5 Input type week will display
the numerical version of the week denoted by a "W" along with the
corresponding year.
<input type="month" name="m"> The HTML5 input type month does
exactly what you might expect it to do. It displays the month. To be
precise it displays the numerical version of the month along with the
year.
<input type="datetime" name="dt"> The HTML5 input type Datetime
displays the UTC date and time code. User can change the the time
steps forward or backward in one minute increments. If you wish to
display the local date and time of the user you will need to use the
next example datetime-local
<input type="datetime-local" name="dtl" step="7200"> Because
datetime steps through one minute at a time, you may want to change
the default increment by using the attribute "step". In the following
example we will have it increment by two hours by setting the
attribute step to 7200 (60seconds X 60 minutes X 2).
This was a good waste of an hour of my time. For you eager beavers, the following format worked for me:
<input type="datetime-local" name="to" id="to" value="2014-12-08T15:43:00">
The spec was a little confusing to me, it said to use RFC 3339, but on my PHP server when I used the format DATE_RFC3339 it wasn't initializing my hmtl input :( PHP's constant for DATE_RFC3339 is "Y-m-d\TH:i:sP" at the time of writing, it makes sense that you should get rid of the timezone info (we're using datetime-LOCAL, folks). So the format that worked for me was:
"Y-m-d\TH:i:s"
I would've thought it more intuitive to be able to set the value of the datepicker as the datepicker displays the date, but I'm guessing the way it is displayed differs across browsers.
This works for setting the value of the INPUT:
strftime('%Y-%m-%dT%H:%M:%S', time())
That one shows up correctly as HTML5-Tag for those looking for this:
<input type="datetime" name="somedatafield" value="2011-12-21T11:33:23Z" />