I have been using the dynArch calendar for some time now. Can't say I've explored all the alternatives but I can recommend this one. Its pretty flexible.
I have run into a problem today that selecting a date was suddenly not updating the text control.
Ultimately, the problem seems to be that when the linked text box is blank, the calendar does not update the linked text box on selecting a date. Further testing reveals that any non-date causes the unwanted behavior.
I have verified that this behavior has been lurking in my production code, so its something I need to address.
I have started walking through the js library to see if i can track it down, but thought I would reach out to the collective as well.
Any help or pointers would be appreciated.
Thanks
In my particular case, the reason I was not seeing the popup was becuase the target text box had an invalid date in it.
I did not research if i could make it pop up a calendar w/ today in it.
Related
I've never worked with Ember, and am fairly new to JavaScript, and have for the past couple of days been trying to translate my HTML and JS into the Ember framework (I got some help from a friend). The first feature of the project should simply be able to fill a text-field with longitude/latitude of an inputted address. The second feature of my project is based on a selection from a drop-down menu (drop-down is made of different counties), and fill another text-field with a specific email address depending on which selection was made.
The problem I'm having: I can't seem to figure out how to fire up my setEmail function as I need it to recognize a value (1, 2, 3, 4 etc.) from the selected county from the drop-down, and based on that value; fill in the text-field with the correct email address. I've heard about Ember Observers, but cannot seem to figure out how to implement them for the drop-down I built. I'd really appreciate if someone could take a look at my project and give me pointers on what I could improve, or even do completely differently.
Here is a link to an Ember Twiddle of my project: GeoApp
I appreciate any suggestions and insight! Thank you.
The main idea was right, you were just missing small details. x-select has an "action" hook that you can use which is being triggered every time the value of the x-select changes. This also passed to you as an argument the selected value.
Also there was no need to make the as |xs| part and the options should be set as {{#x-option value='country.value}}country.display{{/x-option}}
Doing all this will make it work. You can find a working twiddle here.
Recently I have received a project to make a webpage comply with WCAG 2.0 Level A. The part that I am running into a problem at the moment is the datepicker component. The datepicker component allows the user to select the date in two ways. One way is to manually type in a date, for example, 04/06/2014. The other way is to select the small image beside it and a calendar would basically pop-up and the user can select the date from there.
While researching over the web, some people have suggested that we do not have to make the image part of the datepicker component accessible since the text-field itself provides an alternative for accessibility. Is this acceptable (First Question)?
If this is the right way to go, how do I make it so that accessibility technology like screen reader would ignore the image icon (Second Question)? I have also tried to research for this issue. Basically, if it was just an image, we could set the "alt" attribute to null. But this image is actually embedded inside an "anchor" tag (which makes the image click-able) therefore this practice is invalid (verified by achecker.ca).
Update: HTML5 Accessibility: aria-hidden and role=”presentation” answers the second question
Any thoughts would be helpful. Thank you
The answer to the first question depends on what the usability reason is for showing a visual calendar? If you are showing it so that users can select a date based on use cases like "first Friday in Month X" or something similar, then simply providing a text input, while making the page at least usable, does not make the page functionally equivalent for screen reader and keyboard-only users and therefore does not pass WCAG 2.
Your answer to the second question that you posted, works for screen readers (in terms of removing the aforementioned functionality) but it now presents a problem to sighted keyboard-only users. You are therefore still not WCAG 2 compliant.
Making date pickers accessible, while difficult, is possible. Are you using the jQuery UI datepicker?
I am experimenting with JavaScript again, and wanted to make a clock in an alert box (bookmarklet).
The following code:
javascript:alert(new%20Date().toLocaleString())
will show the time in the format Wednesday, August 08, 2012 12:40:54 AM. However, the time for the clock is not updated because the bookmarklet is just fetching the time. So, are alert boxes able to be updated (like this:)
javascript:alert(setInterval("new%20Date().toLocaleString()",1000))
or is an alert box not able to be updated (it fetches something and then stops executing script)?
EDIT* I have tried the second code line already and know it doesn't work, I only mean for it to be an example of finding a method that allows the time to be updated.
No - alert boxes print a string and their content cannot be changed whilst they are showing.
Use a DHTML dialog simulation instead, such as Facebook's. Since these are just HTML doing the job of native modal functions (e.g. alert()) they are much more flexible.
That's correct. Alert boxes cannot be updated. They also posses another very important feature which is difficult to achieve otherwise in javascript (not that you would want to). They completely suspend execution of any code (because javascript is single threaded) until they are dismissed.
Here is a working example of a javascript clock from github.
He sources the tutorial he used in his Readme.
I am using Selenium to test out a web site. The web site contains a date field, which when clicked, opens a popup from wherein I can choose the date.
My issue is that I wish to select a particular date using the Selenium IDE or Selenese. I have tried various methods, but have not been able to get a correct solution or been able to resolve it, except by manually specifying a date to the field in Selenese script. I am using Java to implement the test case.
An example could be checked by going to any airlines site and clicking on the date field for departure. The popup which comes up, I wish to capture a date on that. This could be a future date or the present date.
You need to implement some code that will navigate calendar to the desired date. Depending on the calendar appearance it may be required to navigate to the next month or year, so you need the code that will determine what needs to be done and then emulate required events for Selenium.
We had the same task in our tests and we end up with either selecting today's date or by entering the date into the field directly. We also made a code that will allow to select any date on the calendar by we did this only because we needed to test the calendar widget and we were the authors of the widget so we knew how it was made. However it resulted in writing a lot of code
Selenium IDE is limited in its ability to handle javascript. I've worked around it at times
by putting custom links in that do customized GETs, but it's a hack.
You could look at Sahi, which can do it. I haven't tried it though.
http://sahi.co.in/w/
I have a form with a TextField for entering a date. I have a DatePicker "set" on this field. However, it appears on top of the field. I do not want it to obscure the text field. How do I go about doing this?
Make sure that there's enough room below your input field for the whole date picker box to be rendered. By "room", I mean space in the enclosing window. The date picker tries to make sure that its display fits in the window, but it's pretty clumsy about it.
You might also want to look at the CSS for the date picker. In my opinion the default spacing for the calendar makes it ridiculously over-sized. You can tighten that up pretty easily; use Firebug to play around with it.