minTime and maxTime of jquery DateTimePicker not respected - datetimepicker

I'm trying to work with http://xdsoft.net/jqplugins/datetimepicker/ .
I have the following code:
var TIMESETTING = {format:'H:i',datepicker:false,scrollMonth: false,scrollInput: false,minTime:'07:00',maxTime:'09:00',formatTime:'H:i'};
$('#date').datetimepicker(TIMESETTING);
But when I run it, ALL the time slots of the text field are greyed out and not clickable.
What am I doing wrong?

var TIMESETTING = {format:'H:i',datepicker:false,scrollMonth:false,scrollInput: false,minTime:'07:00',maxTime:'09:00',formatTime:'H:i'};
$('#date').datetimepicker(TIMESETTING);
In your options object you are setting format as well as formatTime, is this of a specific reason? Does it work if you utilize allowTimes instead?

Related

I am unable to click this dropdown and get the element item (GMT -8:00) Pacific Time (US & Canada) can anyone help me out

I am not able to write a selector for this dropdown I used code like:
SelectTimeZone()
{
const drop = cy.xpath("//div[#class='select-container']//select[#name='Time Zone']")
drop.select('Choose one').click()
cy.xpath() will be asynchronous, so you can't use it like this, you have to chain it like it's usually done in Cypress:
cy
.xpath("//div[#class='select-container']//select[#name='Time Zone']")
.select('-08:00');
Another problem is what string you sent to .select() method. If you want to choose some time value, you have to use e.g. a value or text of the appropriate option.
I'd also try to avoid xPath as much as I can, it's not very readable, this selector might work just fine:
cy
.get("[name='Time Zone']")
.select('-08:00');

How to check input span styled as checkbox is selected using Selenium? Only :: after as the difference between states

I am trying to check whether a checkbox is selected. My checkbox is styled using input and span, not using the checkbox tag. As it's not a default checkbox I can't use methods such as isSelected or isChecked to check its state. I was then trying to check if any class belongs to a state but not the other. However, the only difference I've found so far is that when the element is selected an ::after appears but not sure how to go about checking this?
I found a tutorial with a similar issue, but don't know much about Javascript and not sure how to adapt it to my case.
https://www.quora.com/How-do-I-locate-After-and-Before-css-tag-in-selenium-webdriver
Before clicked
After clicked
That's what is being used and as per #pguardiario answer
System.out.println(js.executeScript("return window.getComputedStyle(document.querySelector('.custom-checkmark'), ':after').getPropertyValue('content')"));
But both when it's selected or not it returns the same output (empty string)
UPDATE
Found the difference between the selected and unselected states. The .custom-checkmark:after style has display-none when the checkbox is not selected.
Not sure still how to use this info as that's what I have at moment and they return display none both before and after the checkbox is clicked.
#Test
public void testingCheckbox() {
JavascriptExecutor js = (JavascriptExecutor) wd;
System.out.println(js.executeScript("return window.getComputedStyle(document.querySelector('.custom-checkmark'), ':after').getPropertyValue('display')"));
lp.clickCheckBox();
System.out.println(js.executeScript("return window.getComputedStyle(document.querySelector('.custom-checkmark'), ':after').getPropertyValue('display')"));
}
NEW FINDING
It seems there's actually 'two checkboxes'. One with the span tag and the other one with the span. They appear together when unselecting some attributes.
Thanks for the help.
I can't test it but it should look something like this:
driver.executeScript('return window.getComputedStyle(document.querySelector(".custom-checkmark"), ":after").getPropertyValue("content")')
Sorry about the long line btw, Java doesn't have heredocs which makes this painful :(
Try use JavascriptExecutor, import them :
import org.openqa.selenium.JavascriptExecutor;
Try this :
WebElement chk = driver.findElement(By.xpath("//*[#class='custom-checkmark' and ./preceding-sibling::*[#id='terms_checkbox']]"));//or you have
String getPro;
getPro = ((JavascriptExecutor)driver).executeScript("return window.getComputedStyle(arguments[0], ':after').getPropertyValue('background-color');",chk).toString();
System.out.println(getPro);
chk.click();
Thread.sleep(1000);
getPro = ((JavascriptExecutor)driver).executeScript("return window.getComputedStyle(arguments[0], ':after').getPropertyValue('background-color');",chk).toString();
System.out.println(getPro);
Not sure with .getPropertyValue('background-color'), but this may be a clue.
Try the below CSS selectors for identifying that
span.custom-checkmark:after
And also please see the below link for more details
Extracting content in :after using XPath
Got the code to work. Targeting the input tag instead of span solved the problem. I had a mistake on my code when tried that first time so that's why though the isSelected field wasn't working and moved on to target the span tag instead which opened this thread here. Sorry about that and thanks for everybody's help.

How to sendkeys "time" in time type element?

I need to pass data in time format in "time" type element in "10:00 AM" format.
I am using following code:
public static void setShift()
{
txttime.sendkeys("1030AM");
}
this is not working. what is a correct way to enter such data?
Use Following Code :
It will work it for textbox/text area control
SimpleDateFormat formatter = new SimpleDateFormat("hh:mm a");
Date date = new Date();
txttime.sendkeys(date);
For the HTML input type datetime-local handling it from selenium is not ideal. It is not the most used date time picker, and it is not supported in firefox or safari.
For chrome, the date time format shows the format set in the browser's machine.
If you haven't changed anything, I'm guessing you are getting the format shown in the guru99 tutorial.
If that is the case, then you have missed that they also have provided the solution there.
After entering the date part you need to press tab to input the time part. Which is missing from your given code.
Try this:
First, input the date
WebElement dateBox = driver.findElement(By.xpath("//form//input[#name='bdaytime']"));
dateBox.sendKeys("09252013");
Second, press tab
dateBox.sendKeys(Keys.TAB);
Last, input the time
dateBox.sendKeys("0245PM");
Note:
If your machine has different DateTime formatting then this might not work. You have to check which part of the date time senKeys can actually input then split up that part and use Keys.TAB to press tab. Then input the next part until completion.

Bootstrap datepicker toggle disable

I am using bootstrap-datepicker and getting an issue.
When I click a day, it works well,but when I click the same day again. The selection gets cancelled
The boostrap datepicker demo works well.
I had found the example for bootstrap date picker from the above link.
It's a known issue. Here is a workaround for this issue.
https://github.com/eternicode/bootstrap-datepicker/issues/816
jsfiddle the issue: http://jsfiddle.net/antonkruger/fpgseobz/
Once I've tried it, I'll post an update.
Update:
Yes it works.
In the defaults # line 1394, add a new option, allowDeselection
var defaults = $.fn.datepicker.defaults = {
allowDeselection: false,
...
};
In the _toggle_multidate function # line 1015, modify the "else if (ix !== -1)" statement to:
else if (ix !== -1 && this.o.allowDeselection){
this.dates.remove(ix);
}
I came across this issue myself so if you still need this. trick is to store the current date in a variable each time a new date is created. If the new date is undefined (empty) update date with the temporary variable. I know its a dirty solution, but hey atleast its working.
I wrote a little fiddle enter code herehttp://jsfiddle.net/d86msex1/
Goodluck!
There's now an official way to accomplish this:
$element.datepicker('remove');
source: http://bootstrap-datepicker.readthedocs.org/en/release/methods.html#remove

FilteringSelect text alignment

Using Dojo 1.6.1
I have a FilteringSelect that looks like:
When an address is selected, it looks like:
What I'd really like to see instead is:
Any ideas on how this could be accomplished?
When you select a value in a Filtering select, the caret position is at the end of the text, so it's not CSS that will help you there.
You have to move the cursor to the beginning of the text.
I see no other option than javascript here.
If you look at the template of dijit.form.FilteringSelect, you will see that the input node is bound to the property "focusNode" of the widget. So you could use that to move the caret, like this :
dijit.byId('your_filteringSelect_id').onChange = function(evt) {
this.focusNode.setSelectionRange(0,0);
}
This appears to be an IE & FF issue see this listed bug:
http://bugs.dojotoolkit.org/ticket/8298
and also this test case (issue seen in IE7-9):
http://jsfiddle.net/snover/96Ud8/
The work around suggested is to set the function _setCaretPos to do notthing e.g
dijit.byId('your_filteringSelect_id')._setCaretPos = function() {};
.setSelectionRange doesn't work at IE
Use dijit.selectInputText(widget.focusNode,0,0); instead