I'm developing a webapp for iPad and i got stuck on something that should be pretty basic.
I have a form with a datetime input which can be edited but it's supposed to show a default value. I tried using the followin tag
<input type="datetime" id="xyz" name="xyz" value="1996-12-19T16:39:57" />
no default value shown, picker works fine, and if edited everything is fine, just not showing the default value I'm setting.
If I use this instead (which of course I can't use...) everything works perfectly and the default value is regularly shown
<input type="date" id="xyz" name="xyz" value="1996-12-19" />
I tried changing the date format in many ways, as suggested by various articles I found on the web, no luck...
After a day search I found the solution while looking for something else (!!!)
Future reference for whoever gets stuck on this like me, the correct format on iOS for DATETIME input type is
yyyy-MM-ddTHH:mm:ss.fffZ
and remember that it the date is GMT+0 (mine was off 2 hours)
hope it helps
Related
I'm not sure if there's a way around this, but Firefox doesn't play nicely when you're using input type="date" with a min= attribute: It always open the datepicker on the current month, rather than the month where the minimum valid date begins. This is particularly annoying if the date is in the future.
For example:
<input type="date" min="2021-08-04">
(See JSFiddle in Firefox.)
The user has to manually scroll through months until they finally get to the one that's available. Less than ideal!
One way to bypass this behaviour is to set a value to the input as suggested in the comments. Instead of setting value attribute in the HTML, you can try to set it programmatically when the user clicks on the input and the datepicker is shown.
I think that focus/focusin are the best events to use to catch, since as far as I know there is no show/open events on input[type="date"].
On MDN page, in the Events sections are mentioned only change and input.
Here a live sample:
var dateControl = document.querySelector('input[type="date"]');
dateControl.addEventListener("focus", function(){
// You can add validation on value
if( this.min && !this.value ){
this.value = this.min;
}
});
<input type="date" min="2021-08-08">
I know this is not a really great solution as the browser can be tricked any time.
But this should work too.
HTML : <input id="dateInput" type="date" min="2021-08-08">
You can identify the browser of the client if it is Firefox and change the date automatically to become the minimum through this JS:
if (navigator.userAgent.indexOf("Firefox") != -1) {
document.getElementById("dateInput").value = document.getElementById("dateInput").min;
}
You can use value attribute to set the default value.
<input type="date" min="2021-08-04" value="2021-08-04">
Given the pop-up example at http://plnkr.co/edit/idrirF9zxvCMCQWTk8nr?p=preview how do I actually get the date if the user changes it?
I am guessing that I should do it in $scope.open = function($event) but I just don't know how. I have searched this site & googled extensively. What did I miss? Thanks.
you plunk link is not working.
I don't know what exactly happen in your code.
I think maybe your miss ng-model,
ng-model is the way to do two-way data binding in angular .
for example
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" />
in this example date is binding to dt (ng-model="dt")
you can get data by $scope.dt
if you want to watch the date change
you can do
$scope.$watch('dt',function(val){
//to do
console.log(val)
})
Is there a way to display a date in an input different from the format I want to submit.
For example I have to submit a date in "yyyy-mm-dd" format but I want to display the date in another format : "dd/mm/yyyy" (french display).
Is there a good tip to do that with Datebox for jQuery Mobile (an option I didn't see ?)
I think I have to cheat in creating an input hidden with the good form format and another one with the format to display (and not submitted), but maybe a better solution exists.
Any ideas ?
Your best bet is to indeed use 2 inputs - but, it's pretty easy to do, and using a callback on the set event, you can even make datebox do the second format for you.
http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html
(Note: I just added the demo, so you didn't miss it earlier)
Just a small addition
It should be "overrideDateFormat":"%d/%m/%Y" in the HTML inline options.
In http://dev.jtsage.com/jQM-DateBox2/demos/script/split.html it states "dateFormatOverride":"%d/%m/%Y"} however this is incorrect and doesn't work. Just a heads up for anyone else with this issue.
Yes you need to use this method.
<!-- fix american date formatting -->
<script type="text/javascript">
jQuery.extend(jQuery.mobile.datebox.prototype.options, {
'overrideDateFormat': '%d/%m/%Y',
'overrideHeaderFormat': '%d/%m/%Y'
});
</script>
I have a date and want to show difference of it with current time as --year--month--days--hours--minutes--seconds. How can I do this jstl? It is sure that the date will be greater than current datetime.
Using JSTL you could do some code gymnastics like:
<jsp:useBean id="now" class="java.util.Date" />
<fmt:parseNumber
value="${(now.time - otherDate.time) / (1000*60*60*24) }"
integerOnly="true" /> day(s) passed between given dates.
But as code suggests, this gives overall difference and hardly could be a "calendar aware" way of doing it. I.e. You could not say: "3 years, 1 month and 2 days passed since otherDate".
Another example for this "days passed..." style, using a JSP tag and using "today/yesterday/days back" presentation:
<%--[...]--%>
<%#attribute name="otherDate" required="true" type="java.util.Date"%>
<jsp:useBean id="now" class="java.util.Date" scope="request"/>
<fmt:parseNumber
value="${ now.time / (1000*60*60*24) }"
integerOnly="true" var="nowDays" scope="request"/>
<fmt:parseNumber
value="${ otherDate.time / (1000*60*60*24) }"
integerOnly="true" var="otherDays" scope="page"/>
<c:set value="${nowDays - otherDays}" var="dateDiff"/>
<c:choose>
<c:when test="${dateDiff eq 0}">today</c:when>
<c:when test="${dateDiff eq 1}">yesterday</c:when>
<c:otherwise>${dateDiff} day(s) ago</c:otherwise>
<%--[...]--%>
Note:
In your software problem domain, if it makes sense to talk about days and months in a calendar way, probably you should have that expressed in your Domain Model. If not, at least you should benefit from using another lower software layer to provide this information (and for example using java.util.Calendar or Joda-Time APIs).
Not sure there are any built in ways of doing this with JSTL. you could write your own tag library or potentially use expression language (EL) like below.
${(dateObj) - (now.time)}
taken from Looking for JSTL Taglib calculate seconds between two dates
Mark I'm uncertain if this is possible using JSTL and one way would be to create your own custom tag to handle this as #olly_uk suggested. Me personally would not use any expression language on my JSP as this might also affect readability and not best practise.
You could also have this calculation/date difference when your page bean is constructed, that way avoiding any EL or a new tag. This also might have its limitations such as I'm not sure if the date you want to check the difference is entered by the user on field where you want to display the result instantly etc if you see what I mean.
Also another you could try depending on your scenario is using jQuery to calculate and display the difference, I thought I'll link this page anyway from SO.
How do I get the number of days between two dates in JavaScript?
JQuery Calculate Day Difference in 2 date textboxes
Hope this helps.
I am using an AJAX Control Toolkit: 'maskededitvalidator' to validate a textboxe's date entry. I am trying to set the minimum value programatically to today's date. I have tried both adding it to the source (and calling Page.DataBind()) or setting it in the code behind and niether work. No error, just the validation does not work. If I change the 'MinimumValue' property to a hardcoded value it works just fine. Any ideas? Thanks!
In the source directly on the control:
MinimumValue='<%# DateTime.Now.Date.ToString %>'
In the server code:
Me.txtDateMEV.MinimumValue = DateTime.Now.ToShortDateString()
I think this is more likely a "calendar" issue than a "maskedit" one.
Maybe you should try some Calendar option just like the example on Calendar Example. Check out the Calendar with date range, it looks like the problem you have.
I was never able to get the binding systax working in the source, but I did get it working in the code behind like below:
Me.txtDateMEV.MinimumValue = DateTime.Now.ToShortDateString()
I had a CSS style which was erasing the current date if it was left blank and did not have a default date set. Once I updated the CSS not to set 'display:none' for the .AJAXCalendar .ajax__calendar_today style, then the code above worked. So half fixed my issue because CSS was preventing the MinimumValue code to apply. However I really wanted to be able to use the binding syntax but I could never get it to work.