I am new to the playwright framework came from protractor background and want to know the method for the selector to select a date in the playwright.
selctor.fill(date) //not working
fill is used like this:
page.fill('selector', valueToFillWith)
so if date element is 'id="date"'
page.fill('[id="date"]', '08/21/2022')
https://playwright.dev/python/docs/api/class-page#page-fill
page.fill('[id="date"]', '08/21/2022') // not working
like this：
<input readonly="" placeholder="Select date" class="ant-calendar-picker-input ant-input" value="2022-02-25"\>
Related
When I try to trigger a date picker, an error is shown 'Failed: element not interactable'
Structure of an element is the following
<div class="datepicker-input-wrapper datepicker-input-wrapper-start">
<div class="datepicker-trigger"></div>
<input type="text" class="datepicker-input datepicker-input-start" autocomplete="off">
<span class="">Anreise</span>
</div>
My code is:
var start_date = element(by.className('datepicker-trigger'));
start_date.click();
I expect to see date picker opened
There are no other locators except classes, that's why I used by.className
Tried to maximize browser window or scroll to element, it didn't help
Maybe it would be easier if you just use the input with sendKeys like this:
element(by.css('.datepicker-input.datepicker-input-start')).sendKeys('DD-MM-YYYY');
Or whatever date format it accepts
I have a problem. I use a date picker in my html page which I want to get value of input date using jquery. I used this :
var birthday_date = $("#birthday_date").val();
but it's not working. I checked the inspect code then realise when I used date picker, the input tag (which used for date) becomes to this :
<input id="textbox1"
name="birthday_date"
data-targetselector="#textbox1"
class="form-control"
data-mddatetimepicker="true"
placeholder="year/month/day"
data-placement="top"
maxlength="10"
data-mdpdatetimepicker=""
data-trigger="click"
data-enabletimepicker="false"
data-mdformat="yyyy/MM/dd"
data-mdpdatetimepickerselecteddatetime="
{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
data-original-title=""
title=""
data-mdpdatetimepickershowing="true"
aria-describedby="popover30621"
type="text">
the value of the date is this part:
mdpdatetimepickerselecteddatetime="{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
the time is not matter, I just wanna date , google gave me nothing and I have no idea how can I get the value like this, any help? or something to help me?
If you are using datepicker, you can access the value like this:
var date = $('#textbox1').datepicker('getDate');
I use JQuery UI to input dates and use DatePicker for that.
I need to have date displayed like yyyy-mm-dd.
I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker
$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });
returned in the console:
[<input class="date-input hasDatepicker" name="TRAVELDAY_TO" title="Enter date you plan to go to your destination" placeholder="Go to date" type="date" value="2014-05-08 00:00:00" id="dp1399632827005">,
<input class="date-input hasDatepicker" name="TRAVELDAY_FROM" title="Enter the date when you plan to come back" placeholder="Come back date" type="date" value="2014-05-13 00:00:00" id="dp1399632827006">]
But no changes took effect.
So, how to change the displayed date format in Datepicker ?
Later edit:
If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.
So, how to change the displayed date format in Datepicker when input has the type="date" attribute?
refer this working jsfiddle
<input type="text" value="" class="date-input" id="TxtStrtDate" >
$(".date-input").datepicker({
dateFormat: 'yy-dd-mm'
});
What you are doing is the right way to format the datepicker in jQuery UI.
See here: http://jsfiddle.net/abhitalks/w5YQk/
HTML:
<input id="dated" />
jQuery Code:
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
Update (based on your comment on HTML5 date type):
Without repeating what has already been described here:
Is there any way to change input type="date" format?:
The short answer is that the wire format in specifications is
"yyyy-mm-dd", but the browsers are free to decide on the
presentation. Some browsers (like Chrome) present the date as in
client machine's regional settings, whereas others (like Opera)
present the wire format. So, you can't do much here.
The jQuery UI datepicker will fail when the input is HTML5 date
type. In fact it will work only when the format is set, and that
will convert itself to the wire format of the date type input! So,
again you can't do much here.
Ideally, you should present a jQuery (or any other) datepicker
only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.
So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.
You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)
If you want to do it yourself, then this example will help you (explanation embedded as code comments):
Demo: http://jsfiddle.net/abhitalks/w5YQk/3/
HTML:
<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->
jQuery Code:
var dtType;
// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
// We check the type of the second element
dtType = document.getElementById("dated2").type;
/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/
if (dtType == "text") {
// Attach datepicker only if type is "text"
$("#dated2").datepicker();
}
This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.
Hope that helps.
I have a textbox with the property type="date". I am able to retrieve the value in backcode but when I try to assign a value, the placeholder "mm/dd/yyyy" is shown.
When I view the markup, the expected value is there - "value='01/01/1991'". I think it has to do with JavaScript overriding the value.
Any suggestion on how I can work around this?
Edit: Sorry, forgot to include the markup and code
So my markup is
<asp:TextBox ID="txtBirthdate" runat="server" class="form-control input-sm" type="date" onkeypress="handleEnter(event)" />
and c# is
txtBirthdate.Text = usr.BirthDate.ToString("MM/dd/yyyy");
the resulting markup is
<input name="ctl00$ctl00$ctl00$ctl00$Body$Body$Body$Body$txtBirthdate" value="01/20/1991" id="ctl00_ctl00_ctl00_ctl00_Body_Body_Body_Body_txtBirthdate" class="form-control input-sm" type="date" onkeypress="handleEnter(event)">
So as you can see, the value was assigned.
I believe this only happens in Chrome. It requires value assignment to be in "yyyy-MM-dd" format. Try in your C#
txtBirthdate.Text = usr.BirthDate.ToString("yyyy-MM-dd");
This should display the correct value (and it doesn't affect the format of the display).
If will display in this format in other browsers tho. You may want to do some browser detection, e.g.
if (Request.Browser.Browser == "Chrome")
{
txtBirthdate.Text = usr.BirthDate.ToString("yyyy-MM-dd");
} else {
txtBirthdate.Text = usr.BirthDate.ToString("MM/dd/yyyy");
}
but perhaps something more sophisticated
For me this worked:
txtBirthdate.Text = Convert.ToDateTime(TablaHabitacion.Rows[fila].Cells[6].Text).ToString("yyyy-MM-dd");
I'm new to AngularJs and after some serious effort, I finally got the AngularStrap DatePicker and TimePicker to work.
Now I'd like to pass some options to the TimePicker to e.g. use 24-hour format (showMeridian = false). Whereas the DatePicker can be configured with HTML5 data attributes (e.g. data-date-format="dd.mm.yyyy" data-date-weekstart="1"), this seems not to work with the TimePicker.
How can I pass options to the TimePicker?
Configuration options for both plugins can be set with the use of data attributes.
<div class="bootstrap-timepicker"/>
<input id="timepicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/>
</div>