I am using <input type="date"> and developed my app in Firefox. Theres is no way on manipulating the date field and the format is alway valid. From https://caniuse.com/input-datetime I see, this is not supported for any browser, e.g. Safari doesn't have a build-in Datepicker for Desktop Browser.
My Format (out-of-the-box) is DD.MM.YYYY and the value is stored as YYYY.MM.DD.
My app is used in Germany only, so the date format for the user to enter is always DD.MM.YYYY.
Safari uses the value format YYYY.MM.DD out of the box. How can I make sure, the date format is always DD.MM.YYYY during entering for the enduser.
This is my input:
<input
id="birthday"
type="date"
name="birthday"
placeholder="Geburtsdatum"
style={errors.birthday ? { border: "2px solid red" } : {}}
onChange={(e) => {
e.target.value = moment(e.target.value).format(
"YYYY-MM-DD"
);
handleChange(e);
}}
onBlur={handleBlur}
value={moment(values.birthday || user.birthday).format(
"YYYY-MM-DD"
)}
/>
This code looks like this in Firefox:
and like this in Safari:
The user is not used to the format YYYY-MM-DD and I want him to enter the format like: DD.MM.YYYY
Related
I'm currently using date-fns module to get the current date and binding it to the following code below.
<div class="col-md-4 col-sm-6">
<label for="endDateRegistered" class="form-label">End Date Registered</label>
<input type="date" class="form-control" id="endDateRegistered" name="filterBy.endDate" [(ngModel)]="filterBy.endDate">
</div>
The issue i'm facing is that in safari, I'm correctly seeing the date in the input field when the page loads. However, in chrome, I am seeing the placeholder "dd/mm/yyyy" instead. Is there any way to remove this so it shows the date?
Below is the code of getting the date and assigning it.
filterBy = {
stadium: '',
endDate: format(new Date(), 'dd/MM/yyyy')
}
I have a Kendo React Grid to display data that I am fetching from a Sharepoint List. It is a simple grid as shown in this link - https://www.telerik.com/kendo-react-ui/components/grid/get-started/
<Column field="StartDate" title="Start Date" width="200px" format="{0:MMM yyyy}" />
<Column field="EndDate" title="End Date" width="200px" format="{0:MMM yyyy}" />
Right now the date is in ISO format like this-2014-08-14T15:30:10Z
How can I convert to mm/dd/yyyy format? The above value for format property doesn't seem to be working.
The KendoReact Grid formats only valid JavaScript date objects.
There is clarification from telerik:
https://www.telerik.com/kendo-react-ui/knowledge-base/grid-date-format/
You can pass a custom function in 'cell' property to Column. Use 'moment' to customize the date as per your format.
<Column field="StartDate" title="Start Date" width="200px" cell={this.myCustomDateCell}" />
myCustomDateCell = props => {
if (props.dataItem[props.field] !== '') {
return <td>{moment(props.dataItem[props.field]).format("MM/DD/YYYY")}</td>
}
return <td>{props.dataItem[props.field]}</td>
}
First you need to check what is returned from the server.
If the server returned the date value in this format: 2022-02-11T15:50:51.000+00:00
you don't need to use 'moment', you can see my answer here:
https://stackoverflow.com/a/72772927/13663916
I have an HTML document with a button and an input of type time. To set the value of the input to '09:00' either
Click on the button or
Set focus on the input
function setTime() {
document.getElementById('timebox').value = "09:00";
}
<input type="button" value="Set time" onclick="setTime()"/>
<input type="time" id="timebox" onfocus="setTime()"/>
Setting the value via the button always works great.
Setting the value via the focus only works on Windows PC, OSx, and Android. This does not work on iOS. We tested with Chrome and Safari. Here the current time is used as the value instead of our '09:00'
Try this - I wonder if using recommended code is better for iOS, otherwise we can try a setTimeout
I also changed the name of the function since setTime could be an existing built-in function on a date element
const setMyTime = () => document.getElementById('timebox').value = "09:00";
window.addEventListener("load",function() {
document.getElementById("but")
.addEventListener("click",setMyTime);
document.getElementById("timebox")
.addEventListener("focus", function() { setTimeout(setMyTime,50) });
})
<input type="button" value="Set time" id="but"/>
<input type="time" id="timebox" />
I am using momentjs LT(local time) and L(local Date) in a meteor app to set the current time and date value in an html form. It is working in Firefox, but in chrome i am getting --:-- -. Does chrome not support type="time" with a value, or am i setting the time incorrectly?
HTML
<input type="time" name="fTime" value={{time}}>
<input type="date" name="fDate" value={{date}}>
JS
Template.registerHelper('date', function(input) {
return moment().format('L');
});
Template.registerHelper('time', function(input) {
return moment().format('LT');
});
Chrome expects a 24-hour clock, as in value="13:34" or the like. It also wants a date in YYYY-MM-DD format, like 2015-03-08. So change your helpers to accommodate:
Template.registerHelper('date', function(input) {
return moment().format('YYYY-MM-DD');
});
Template.registerHelper('time', function(input) {
return moment().format('H:mm');
});
See example: http://meteorpad.com/pad/XiZBySYHfEydaaZbb/Input%20date%20and%20time%20test (works for me in Chrome in the U.S. locale).
Note that per caniuse, support for these input types is spotty—no versions of Safari or Internet Explorer.
I just upgraded an ASP.Net MVC application to MVC-4. The field editor for inputs based on DateTime values now include's the HTML-5 type="date" attribute/value declaration.
Now, when viewing in Chrome, my date inputs show up with "mm/dd/yyyy" in the input field:
Even when I pass in a correctly-formatted date with the value attribute:
<input value="2012/10/02" type="date"/>
I'm still getting "mm/dd/yyyy" in the input box, which is there until the user manually changes the value.
The problem appears to be with Chrome, and is independent of my back-end framework. See this problem in action: jsFiddle
...big problem for editing records, of course. If the user pulls up a record that already has a valid date, it won't pass validation on submit, unless s/he clicked into the field and reset the value manually.
No problems with the other browsers.
Is this a Chrome bug? Or have I missed something about the way the HTML-5 date field is supposed to work?
UPDATE
See this revise fiddle: http://jsfiddle.net/HudMe/5/ It has both an HTML-4 and an HTML-5 date input, each with "10/01/2012" set as the value on page-load.
Click into either date field.
The Javascript should pup up an alert with the value of the field for that element.
Because a valid date has been passed in with the value attribute, this should show "10/01/2012", but in Chrome, for the HTML-5 date field, nothing shows. Reset this value by hand, then click again, and it will now show.
The value from the HTML5 field shows and alerts as expected without adjustment after pageload in Safari, Firefox, IE and Opera.
Note on accepted answer:
For other users of Asp.net mvc-4, you can adjust the display format with the [DisplayFormat] attribute on the DateTime field declaration in your view-model. (found at https://stackoverflow.com/a/12634470/613004 )
In chrome to set the value you need to do YYYY-MM-DD i guess because this worked : http://jsfiddle.net/HudMe/6/
So to make it work you need to set the date as 2012-10-01
Had the same problem. A colleague solved this with jQuery.Globalize.
<script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/globalize.js" type="text/javascript"></script>
<script src="/Scripts/jquery.globalize/cultures/globalize.culture.nl.js"></script>
<script type="text/javascript">
var lang = 'nl';
$(function () {
Globalize.culture(lang);
});
// fixing a weird validation issue with dates (nl date notation) and Google Chrome
$.validator.methods.date = function(value, element) {
var d = Globalize.parseDate(value);
return this.optional(element) || !/Invalid|NaN/.test(d);
};
</script>
I am using jQuery Datepicker for selecting the date.
I was having the same problem, with a value like 2016-08-8, then I solved adding a zero to have two digits days, and it works.
Tested in chrome, firefox, and Edge
today:function(){
var today = new Date();
var d = (today.getDate() < 10 ? '0' : '' )+ today.getDate();
var m = ((today.getMonth() + 1) < 10 ? '0' :'') + (today.getMonth() + 1);
var y = today.getFullYear();
var x = String(y+"-"+m+"-"+d);
return x;
}
I have same problem and i found solution which is given below with full datepicker using simple HTML,Javascript and CSS. In this code i prepare formate like dd/mm/yyyy but you can work any.
HTML Code:
<body>
<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt" onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />
</body>
CSS Code:
#dt{text-indent: -500px;height:25px; width:200px;}
Javascript Code :
function mydate()
{
//alert("");
document.getElementById("dt").hidden=false;
document.getElementById("ndt").hidden=true;
}
function mydate1()
{
d=new Date(document.getElementById("dt").value);
dt=d.getDate();
mn=d.getMonth();
mn++;
yy=d.getFullYear();
document.getElementById("ndt").value=dt+"/"+mn+"/"+yy
document.getElementById("ndt").hidden=false;
document.getElementById("dt").hidden=true;
}
Output:
If you are dealing with a table and one of the dates happens to be null, you can code it like this:
#{
if (Model.SomeCollection[i].date_due == null)
{
<td><input type='date' id="#("dd" + i)" name="dd" /></td>
}
else
{
<td><input type='date' value="#Model.SomeCollection[i].date_due.Value.ToString("yyyy-MM-dd")" id="#("dd" + i)" name="dd" /></td>
}
}