I have used a datepicker in several places on the website.
As it is now it doesn't work because document.getElementByID('datepicker') the first datepicker is selected.
Is there a way with document.querySelecotrAll or something like this?
easepick.js form selection
Related
I'm trying to implement an input for date that has the datepicker in a modal.
The docs cover datepicker and modal - but not the combination.
I am sort of following this, but do I need to create a whole component for the modal? I'm not really sure how to build this.
An example would be very helpful.
As far as I can determine, while it is certainly a very popular request, it is currently not possible.
https://github.com/valor-software/ngx-bootstrap/issues/273
I have been trying to automate booking a flight on www.kayak.com/flights using Selenium webdriver in java. The issue I am having is that I am unable to enter date into the departing date and arrival date boxes, mainly because when you click in the date box, it displays a popup calendar or date picker. My many attempts to identify the xpath for the date picker itself and the date elements have not been successful as whenever I try to click on the date element in the picker, it changes focus. So, unless I can identify them somehow, I can't enter any data into them. I am sure there has to be someone out there who can help me with this dilemma. Thanks.
If you're using firebug to grab the xpath, you should see a dropdown menu right below the inspect element button. You're probably dealing with an iframe and you will need to switch focus to that frame. It should be easy to check which iframe you want if there are multiple (because the blue dotted frames will display) by passing this xpath: //*
You can do this several ways:
1) driver.switchTo().frame(name_or_id)
2) driver.switchTo().frame(index)
If you're still having troubles, you can always guess and check by starting with 0 and increasing it, so driver.switchTo().frame(0)
I am having a problem to implement date picker in react js. I need a date picker such that user can navigate through different years easily.
For this, I am testing this A carefully crafted date picker for React date picker. The problem is that, it needs much space for a single date picker. I have to use several date pickers in the form. I want that date picker input will be like a text box input. When I click on the text box, date picker will appear, like this one.
I have included the following two css files in my project.
react-date-picker/index.css
react-date-picker/base.css
What you are looking for is DateField. Try this instead:
<DateField
defaultValue={"30.05.2016"}
dateFormat="DD.MM.YYYY"
/>
The other day I stumbled on the Pure project - a set of CSS modules released by the YUI team. I wanted to standardize the forms across my website and I liked the look of their forms module. Especially the style of form they call the Aligned Form. I added the CSS to my site and added the needed styles to my form and it all worked well except for my group of radio buttons. In the Aligned Form each input has a label on the left side and the input to the right of it's label. But individual Radio Buttons have individual labels - which get styled to the right of the button. What I'm looking for is a way to add an overall label for the group of buttons that is styled to the left and centered.
I did find a workaround, but I'm looking more for a dedicate "Pure" way of doing it.
My workaround was to include the radios within a fieldset, and use the legend of the fieldset as the label for the radio group.
I'd enjoy hearing from others who work with Pure Aligned Forms to see how you handled this.
Your question is a little vague I think. If what you are trying to achieve is something like this,
Label
radio
radio
radio
then the way you did it (what you call your "workaround") is actually the best way to do this. Fieldsets are meant for grouping items together and you can use the legend as the label.
However, if you are trying to do something like this,
radio
Label radio
radio
then you are going to want to use floating divs (one to hold your label and another to group your radio buttons).
I can't really get more specific without knowing what your code looks like and what you are specifically going for...
I have a table generated from database ( basically in MVC view). I want to make it editable. I want to use jquery to hide the row when edit button infront of row is clicked and show the row in edit format which is by default hidden. how can I do this using jquery?
Please suggest solution
Thanks
I was able to accomplish this by tagging the table row with a fake class name, then in the button click events I used jquery's Hide/Show. Like this:
In your edit button click event call this:
$('.trMyRowIWantToHide').hide();
And tag your table row with a fake class like this:
<tr class="trMyRowIWantToHide">
JQuery Show
http://api.jquery.com/show/
JQuery Hide
http://api.jquery.com/hide/
You also may want to make use of div tables for this project instead of actual tables. You selectors such as $("#idofcolumn").toggle(); to hide and show the div or in your case you would probably want to show a text field. You could even .html() to replace the text in a column with a text box. There are several ways to go about this. Check out the JQuery documentation.
http://docs.jquery.com/Main_Page
How exactly is the HTML set up for your rows? Normally you could do $('SELECTOR').toggle() on each of them.