I have an issue related to html/angular 2 date picker.
So i have such input tag:
<input #createdAt ngModel type="datetime-local" id="createdAt" name="date" class="form-control" required>
but i don't want allow to a user select future date, so only today and past date is allowed.
How can i achieve such behaviour with angular 2?
Below is the syntax for max/min attributes for the angular material date picker.
<input matInput [max]="maxDate" [min]="minDate" [matDatepicker]="picker">
One of the option is to leverage the max attribute of <input type="datetime-local such as: <input type="date" name="bday" max="1979-12-31">
An alternative is to use an existing Angular2 component, such as the date picker from Bootstrap Angular 2. The component is highly customizable and your goal can be achieved by setting the maxDate input.
Related
I am trying to handle the html based date picker, I am able to click on it so that the date picker calendar pop up, but there is no inspect option for calendar.
Even when i manually select the date there is no such change in the HTML DOM, that can be used.
i tried adding date inside it using following workaround, none of them worked(no , thing happening in DOM).
jse.executeScript("document.getElementById('date-input').value='10101990'");
driver.switchTo().activeElement().sendKeys(Keys.TAB);
driver.findElement(By.id("date-input")).sendKeys(Keys.TAB);
In web it appears as editable along with select from calendar option(run the code snippet below)
while in mobile (web) its appearance is different as shown in screenshot.
is there any solution with JAVA-Selenium : Inspect HTML5 date picker shadow DOM
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
min="2020-01-01" max="2020-12-31" value>
<input class="Input-module_input__nj1kl" type="date" id="date-input" data-testid="date-input" placeholder="Date of Birth" required="" aria-invalid="false" aria-describedby="birth-date-input-error" aria-required="true" min="1920-01-01" max="2020-08-18" value>
<label for="date-input" class="Input-module_label__npqrt1">Date of Birth*</label><label for="date-input" class="Input-module_label__30ytr">Date of Birth*</label>
<span role="alert" id="date-input-error" class="Input-module_errorMessage__lMKY" style="display: none;">Please enter a valid date of birth</span>
Below Code sample have worked for me.Update your required date in format yyyy-MM-dd for the variable date
driver.get("http://127.0.0.1:8887/");
JavascriptExecutor js = (JavascriptExecutor) driver;
String date="2009-02-09";
js.executeScript("document.getElementById('date-input').value ='"+date.toString()+"'",2000);
Change your required Id in getElementById('date-input') inside the js executor
Well... I can simply tell you the simple logic
By default when the calendar opens then-current date is selected
You need to check if current date is less or greater than date to be selected. Date.compareTo function will help here
Then you need to navigate to the corresponding month and year combination.
Once you are in the right month and year then you can select the date as well.
We use the ng-bootstrap Datepicker as Directive in our project:
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()" [(ngModel)]="model"
(ngModelChange)="onDateSelected()">
The current behaviour is that onDateSelected() is called when a date in the datepicker is selected, as well as every time a change is made to the input field.
The desired behaviour is that onDateSelected() is called whenever the user clicks on a date in the datepicker or moves the cursor out of the <input> (i.e. blur).
My approach was to change (ngModelChange) to (blur):
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
[(ngModel)]="model">
but this leads to onDateSelected() not being called, when a date is selected from the datepicker - which kinda makes sense, because the cursor is not inside the <input>. However, I could not find some sort of dateSelected-Event when searching the ng-bootstrap docs on which I could call onDateSelected():
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); onDateSelected()"
/* missing -> */ (dateSelected)="onDateSelected()" /* <- */ [(ngModel)]="model">
Is there something I miss? Or maybe another way to implement this behaviour? I can't think of being the only one with this requirement...
Meanwhile, the issue has been closed and there will be a (dateSelect) event in 1.1.0: https://github.com/ng-bootstrap/ng-bootstrap/pull/2254
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close()"
[(ngModel)]="model"
(select)="onDateSelected()">
This will work and onDateSelected() is called whenever you select a date in datepicker
Here is the solution:
<input
class="form-control"
name="startDate"
[(ngModel)]="startDate"
(dateSelect)="doSomething()"
(blur)="doSomething()"
ngbDatepicker
#startDate="ngbDatepicker"
>
Here (dateSelect) handles choosing from the calendar picker and (blur) handles manually input when the input loses focus.
Guess select output method is what you are looking for.
Select: An event fired when user selects a date using keyboard or mouse. The payload of the event is currently selected NgbDateStruct.
Refer the output section
Using dateSelect worked for me:
<input class="form-control"
name="dp" ngbDatepicker #d="ngbDatepicker" (blur)="d.close(); ()onDateSelected()"
[(ngModel)]="model">
Still learning Angular2. Have a form where I have a startDate and endDate and I want to have input items for each. I am using two-way binding with my model object to a form.
<input type="date" name="EndDate" class="form-control input-sm" [(ngModel)]="selectedDeal.Enddate" required />
The date properties of my model are of type Date:
public EndDate: Date,
When I run this, and bind a model that has a valid date, it just shows mm/dd/yyyy in the text box. HTML5 type="date" support I presume. But it does not show the actual date. It has the date picker built in, which is excellent, but doesn't show the date that is already in the property.
If I change the type="date" to type="text", I see something like 2018-12-31T00:00:00, and lose my date support, plus this isn't user-friendly.
I'm trying to avoid:
1) Having to use the wrong data type (strings) and format my dates into strings for usage - this seems like a bad idea and practice
2) Using Javascript post form display to try to overwrite the value with string formatted date text
Is there an easier way to handle this?
You can achieve this by separating out the bindings, and doing a small amount of plumbing.
Template: (Note the date pipe is using the format 2016-12-31, and the ngmodel and modelchange have been split)
<input type="date" name="EndDate" class="form-control input-sm" [ngModel]="selectedDeal.EndDate | date: 'y-MM-dd'" (ngModelChange)="dateChanged($event)" required />
Component:
private dateChanged(newDate) {
this.selectedDeal.EndDate= new Date(newDate);
console.log(this.selectedDeal.EndDate); // <-- for testing
}
I am using the html5 date attribute, as so:
<form>
Birthday:
<input type="date" name="bday">
</form>
It works great in that it allows you to select a date on a calendar. However, is it capable of selecting date ranges like the jQuery plugin does?
I dont think you can strictly do that using the HTML5 only. You need to use the Javascript as well to achieve what you are trying to do.
You can refer to Date Range Picker for Twitter Bootstrap
Try this
<label for="start">Start date:</label>
<input type="date" id="start" name="trip-start"
value="2020-07-22"
min="2020-07-01" max="2020-07-31">
Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
i want to give user facility to choose how much time from the datepicker . they can choose in
minutes and hours.
are their any datepicker can help me to choose the timespan or timestamp.
any way to do this in html5
In html5 you can pick timestamp using one of following inputs:
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime">
<input type="datetime-local">