I have an MVC 4 site using JQuery Mobile. I'm using a model with an EditorFor to render the date editor. in MVC I have this:
#Html.EditorFor(Function(model) model.ActionDate)
The model property is defined as:
<Required>
<RegularExpression("\d{2}/\d{2}/\d{4}", ErrorMessage:="Please enter a date in the format of MM/DD/YY")>
<DataType(DataType.Date)>
<DisplayFormat(ApplyFormatInEditMode:=True, DataFormatString:="MM/dd/yyyy")>
<Display(Name:="Action Date")>
Public Property ActionDate As Date
It renders HTML with the value of:
<input type="date" ... value="04/24/2013" />
But what shows to the user is this:
The date isn't visible to the user, and the 4/24/2013 is not the default of Chrome's date picker. How do I get chrome to actually show the date?
Thanks.
According to the W3C, the value passed to an <input type="date"> element should be in RFC3339 format. This is a specific profile of ISO8601.
In other words, you need to pass the value in yyyy-MM-dd format.
Just hit this exact same problem.
My solution was to avoid the type="date" problem by changing the type to text when I connect the datepicker:
$('#Date').removeAttr('type').attr('type', 'text').datepicker();
If you are not using JQueryUI, just drop the datePicker part.
As I also needed to force the default date format (again thanks to Chrome) it was:
$('#Date').removeAttr('type').attr('type', 'text').datepicker({ dateFormat: 'dd/mm/yy' });
Chrome is now biting us regularly with jQueryUI issues and has gone from being our favourite dev browser to our most troublesome (for compatibility issues).
Related
In a model I have a field
filed :my_dt, :naive_datetime
As far as I've found out, in Phoenix there's no Html helper for a date alone which will generate a calendar picker. Therefore, I'm using an html tag for it, and it's on a LiveView page:
<input type="date" name="my_model[my_dt]" value={#my_dt_without_time} />
That is, the time part should always remain 00:00 -- may be ignored, for now. I don't need a time zone either, the UTC should be used.
How will I properly bind a my_dt to the date tag such that
a) it'll show itself properly, whenever my_dt is present in the DB; and
b) it'll get edited and updated properly too
?
I'm aware that it'll require pre-formatting it on backend and post-processing, and this will be ok.
I have been working in an ASP.NET Webform project where AngularJs is used. In a form angularJs datetime picker is used to show date and time. Whenever the form is open datetime should show in the fields. The problem is it’s working in Chrome browser but in Firefox datetime is not showing while the page is load whenever the form is load in the first time. The field shows blank. The code for the datetime control is given bellow.
<div class="angular-date-picker">
<angular-date-picker ng-model="UserDateTimeSettings.SelectedDate"
format="UserDateTimeSettings.DateFormat"
selected-date="UserDateTimeSettings.SetDatePickerDate"
date-changed="dateChanged(value)">
</angular-date-picker>
</div>
<div ng-class="datePickerClass">
<div class="angular-time-picker">
<uib-timepicker ng-model="UserDateTimeSettings.TimePickerDate"
ng-change="TimePickerChanged()"
class="custombtn bs-theme-color"
hour-step="hstep"
minute-step="mstep"
show-meridian="UserDateTimeSettings.IsAmPmVisible">
</uib-timepicker>
</div>
<div class="due-date-zone">{{UserDateTimeSettings.AbbreviatedName}}</div>
</div>
In Firefox no error message is given in console either. Can anyone help me how to solve the problem.
I found the problem. The problem is the date format. The date which I am receiving from API is in incorrect format and Firefox does not parse it. This is why datepicker control can not show the date.
I am using the bootstrap datepicker plugin and everything works great with it (including chosen format, disabled weekdays, etc) but no matter how I pass in a datesDisabled option, the resulting calendar just will not show that date as actually disabled.
Here is my initialization code:
$('#tour_date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
datesDisabled: '2017-08-10',
daysOfWeekDisabled: [0,6],
startDate: '2017-08-01',
endDate: '2018-05-30',
todayHighlight: true,
weekStart: 1,
});
The corresponding input:
<input id="tour_date" name="tour_date" type="text" value="" class="form-
control input-md" required>
I have tried rearranging the header CSS and JS files, changing the position of the initialization code to just before the (which is how it is now) and loading all files from a CDN.
The calendar displays just fine with all other options working as expected. The datesDisabled is the one thing where it just won't actually disable the date.
I eventually want to pass in an array of dates to disable, but this can't even disable one date. Any advice would be greatly appreciated, as I have been pulling my hair out for hours trying to get this to work. I am using this with the AdminLTE admin panel if that makes a difference.
I also came across some Fiddle implementations of the bootstrap datepicker and edited them to fit my code, and it works there! Why does that particular option not work on my setup?
Thank you.
For future reference, my included CSS and JS files were out of date. I simply referenced the most updated versions, and everything worked!
Is this possible to achieve without javascript/jQuery?
I currently have a login template with the input fields as:
<input id="username" type="text" name"username" placeholder="username" autofocus>
I was wondering if there was a way when the user clicked their mouse on the field to type the placeholder text would disappear without using javascript if possible? Before this i was just using value and echoing the variables out into the fields but currently experimenting with HTML 5 and CSS3.
Thanks.
New browsers have a native way to do this. And if supported, you don't have to do anything.
With older browsers you do need to use javascript.
Edit: When using new features on old browsers its called Pollyfills. Here is a nice list with a lot of pollyfills that can be used together with Modernizer, that in turn can detect this features.
I've got a richfaces calendar component defined as
<rich:calendar id="startDate" value="#{myBean.dateSet.startDate}"
timeZone="#{myBean.dateSet.timeZone}"
datePattern="#{myBean.dateSet.datePattern}"
enableManualInput="true" immediate="true">
<a4j:support event="onchanged" action="#{myBean.adjustEndDate}"
reRender="startDate,endDate" ajaxSingle="true" />
</rich:calendar>
when I'm changing the date using the calendar popup/gui everything is working fine.
However when I'm changing it via the input text field, the value is not being updated to myBean.dateSet.startDate, although it is being updated correctly on the calendar component itself (i.e. if I click the icon for calendar popup it shows the updated current date).
Any suggestions on how I can get it to update the value to myBean correctly?
Thanks!
Use oninputchange event, that's the one that tracks manual changes.
I'm not sure if this helps, but if you want to get the value inside the input text field, you refer to it as <calId>InputDate . So in your case, the input text field will have id startDateInputDate. Hope this helps somehow!
You can use the oninputchange event inside the rich:calendar component like Max Katz suggested.
For example:
<rich:calendar
...
oninputchange="invokeCalendarOnChange(event,'#{rich:clientId('$idOfTheCalendar')}')"
...
</rich:calendar>
function invokeCalendarOnChange(event, id) {
var c = RichFaces.$(id);
c.invokeEvent("change", RichFaces.getDomElement(c.id), event, c.selectedDate);
}
Hope that helps!