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.
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 a FAQ page that reads a Firebase node and lists all the Q & A contents using the below lines of code:
<firebase-auth id="fbLogin" provider="anonymous" location="https://XXX.firebaseio.com"></firebase-auth>
<firebase-collection orderByPriority log id="fbFAQ" location="https://XXX.firebaseio.com/faq" data="{{faqs}}"></firebase-collection>
<template is="dom-repeat" items="[[faqs]]" as="faq">
<div class="forBorder">
<akyral-details id="[[faq.__firebaseKey__]]">
<akyral-summary>[[faq.q]]</akyral-summary>
<p class="answer">[[faq.a]]</p>
</akyral-details>
</div>
</template>
I have a link from mainpage to the FAQ page and upon click it works perfect! However when I go back to main page and then click again for FAQ link the page renders nothing. But if i refresh the page then its fine.
To recreate do the following:
Open https://sizzling-fire-7471.firebaseapp.com/ and click the FAQ page link at bottom . You will see a list of Q & A
Then click left arrow on top to go back to main page
Now click FAQ link again and you will not see anything,but in the console you will see it fetching data. Also, refreshing the page makes it okay
I bet it's a race condition. The firebase-auth and firebase-collection are firing at the same time, causing it to try to fetch the collection before it's authorized. Try wrapping firebase-collection in <template is="dom-if" if="{{fbUser}}"> so it doesn't get stamped until the auth is completed.
This issue has now been resolved. It was due to a bug in firebase-collection. It was fixed at https://github.com/GoogleWebComponents/firebase-element/pull/42/files and will soon be merged.
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).
I am using fullcalendar from arshaw.com/fullcalendar for displaying events on a corporate intranet calendar. I had the className attribute working, made a couple changes to some code and now cannot figure out why it's not working. Here is the json that is returned from my service
[
{
"allDay":true,
"className":"corporate",
"editable":null,
"end":null,
"id":null,
"start":"2010-07-05T00:00:00.0000000",
"title":"4th of July Holiday (Day Off)",
"url":"\/en\/EmployeeResources\/Calendar\/Corporate\/2010\/07\/4th_of_july_holiday.aspx"
}
]
everything works fine, except for assigning the 'corporate' className to the event items on the calendar.
This is the code that I'm using on document.ready to load the calendar events, which again, works fine, it's just the className's that I'm having trouble with
$("#calendar").fullCalendar('addEventSource', '/layouts/calendar/SitecoreCalendarEventsHandler.ashx?calendar=Corporate')
I'll also note, I'm using the latest version from arshaw.com (1.4.6)
nevermind, it seems that it was being generated, web developer toolbar was not showing the class being added, but when I viewed generated source, that showed the class name. I had some messed up CSS, which was why the style appeared to not be showing up
Question: Is there any reason Autocomplete=off on a ASP:Textbox would not be working in IE 7?
In case this is the best term for it, the IE Autocomplete feature is that drop down list like thing that drops down from textboxes and shows you past things you have typed in.
I need the IE Autocomplete feature to not work at this point for a textbox that is part of a user control that works like an Ajax Autocomplete control. Problem is, when the Ajax Autocomplete selection list shows up, so does the IE Autocomplete selection box. (In cases where I might double click the textbox) I'm using this:
someTextbox.AutoCompleteType = AutoCompleteType.Disabled;
But it stills shows up. I've tried removing the items from the IE Autocomplete, but the next time I type something in and press enter, the problem reappears. Any ideas?
Note: The textbox is rendered with the Autocomplete=off tag when viewing the source.
Note 2: Have tried someTextbox.Attributes.Add("autocomplete", "off"); also without success
* Update, figured it out a while ago but forgot *
test.AutoCompleteType = AutoCompleteType.None;
That actually works. I'm not sure what the difference is though. Suppose Ill look that up sometime.
Try adding AUTOCOMPLETE="off" to your form tag too:
<form name="form1" id="form1" method="post" autocomplete="off">
Trying to clear out my unanswered questions that I've answered in the original post.
test.AutoCompleteType = AutoCompleteType.None;
Try this one:
someTextbox.Attributes.Add("autocomplete", "off");
in Page Load
txtusername.AutoCompleteType = AutoCompleteType.Disabled;