I have a table which has a set of data.
Now in my table i have a checkbox for every row that enables or disables row.
When i click on checkbox that specific row should get disabled.
Issue is i am successfully able to disable the datepicker field but the calendar icon still remains enabled.
Below is the code i have been using:
For the datepicker textbox(Works Fine):
$(this).closest('tr').find('.animalBroughtDate').prop('disabled', true);
For the Calendar icon(Not working):
$(this).closest('tr').find('.ui-datepicker-trigger').hide();
HTML:
<input id="animalBroughtDateId" class="animalBroughtDate dtp hasDatepicker" style="width: 100px;" type="text">
<img title="Ok" alt="Ok" src="/../..datePicker.png" class="ui-datepicker-trigger">
Please guide.
Use built in U.I datepicker disable command.
$(this).closest('tr').find('.animalBroughtDate').datepicker("disable");
And in case you want to enable just :
$(this).closest('tr').find('.animalBroughtDate').datepicker("enable");
Related
I am using a custom calendar datepicker from the following link
http://sajanmaharjan.com.np/nepali-datepicker/
This datepicker seems to be working fine but I am failing to display the date-picker by default when a page loads.
we can display the calendar of jquery with $('#id').datepicker('show'), however above datepicker
doesn't have any such functionality. it can only be accessed only when a user clicks on textbox.
I tried initializing datepicker with an Id of an element
<div id="nepaliDate"></div>
$(function(){
$('#nepaliDate').nepaliDatePicker();
});
Above code doesn't display calendar on page load.
The only code that works is with input type="text" and when we click on the textbox
<input type="text" id="nepaliDate"/>
$(function(){
$('#nepaliDate').nepaliDatePicker();
});
Could any please help me in knowing how can I display the calendar on document.ready or window.load?
Thanks
I am writing the cypress test. I can see the developer has used the below script to select the dropdown list. They didnt use the select option for drop down. They used the div for dropdown.
So that you dont see the options are not getting displayed in the script
div class=" css-yk16xz-control">
<div class=" css-g1d714-ValueContainer">
<input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>
I have tried this cy.get(".css-g1d714-ValueContainer").click() in my test and it's getting clicked and it displays the dropdown. Now I have to select anyone value from the drop down. I dont see any options are displaying there when I do inspect in my browser.
By manualy I can select any one value and I click it and then I can see selected value is getting displayed in inspect browser.
<div class=" css-yk16xz-control">
<div class=" css-g1d714-ValueContainer">
<div class=" css-1uccc91-singleValue">Start</div>
<input id="react-select-2-input" readonly="" tabindex="0" aria-autocomplete="list" class="css-wmatm6-dummyInput-DummyInput" value=""></div>
I dont see the 'start' in the beginning itself. So I tried these two code in cypress
Firstone
cy.get(".css-g1d714-ValueContainer").click()
cy.get(" css-1uccc91-singleValue").invoke("Start")
This also didnt work
Secondone
cy.get(".css-g1d714-ValueContainer").next(" css-1uccc91-singleValue","Start")
This also didnt work.
I wanted to know how to write the locator for selecting the dropdown value?
You can directly use .contains() once the dropdown is in the opened state to select the option. Add {matchCase: false} to disable the check for case sensitivity.
cy.get('.css-g1d714-ValueContainer').trigger("mousedown")
cy.get('.css-g1d714-ValueContainer').trigger("mouseup")
cy.contains('Start', { matchCase: false, timeout: 6000 }).click()
I am using date picker of bootstrap x-editable. Its working fine but I want to customized some of it's functionality. Suppose when we select any date and click on Tick mark then we can show the combined date inside a tag. So I want to get the same functionality onblur also (outside of the container but date should be change).
I think you can use this code into your input text as like that
<input size="16" type="text" value="2012-06-15 14:45" readonly class="form_datetime">
<script type="text/javascript">
$(".form_datetime").datetimepicker({format: 'yyyy-mm-dd hh:ii'});
</script>
I have a ExtJS based UI. I have come to know that in ExtJS the combo box is not a real combo box but a combination of input text field, image of drop down box and a list.
Now i am able to identify the control but i am stuck at selecting the value from the list.Coyuld you please help me out in setting the value of "functional currency" from the drop down. Please find the HTML Source code below
<input id="bc_lookupcombo-1139-inputEl" type="text" role="combobox" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="reporting_currency" placeholder="Entity Functional Currency" style="width: 100%;">
I want to display calendar every time in div tag which is movable pop up & user can select date from calendar in javascript
Take a look at jquery UI calendar control. Just include the JQUERY UI files to your HTML. Then
<input type="text" name="cal" id="cal" />
$("#cal").calendar();