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
}
Related
I'm trying to put a date from my database to my input type="date" field. Strings works perfectly, they all go to form when except date.
My input type is date on the form.
my form :
<input [value]="candidat.birthDate" type="date">
candidat:
export class Candidat {
birthDate!:Date;
}
This is more of a general HTML input error
When you use type="date" in you input element, you have to comply to its expected values.
The specification illustrates that:
value includes the year, month, and day, but not the time. The time and datetime-local input types support time and date+time input
So to make it work you need to adjust datTime string 2022-03-30T00:00:00.000+00:00 you are using. Using the first 10 chars should do the trick:
<input [value]="candidat.birthDate?.substr(0,10)" type="date">
why don't use pipe, just like below:
<input value={{candidat.birthDate | date}} type="date">
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.
I'm using input type date in my reactjs project it's working fine but as I requirement I need to change date format dd/mm/yyyy to yyyy-mm-dd..tried but not getting any solution.
My code is:
<Input
type="date"
format="YYYY-MM-DD"
id="start_date"
name="start_date"
placeholder="Start Date"
value={this.state.start_date}
onChange={this.onChangeHandle}
className="form-control"
/>
the displayed date is formatted based on the locale of the user's browser
- MDN
So you probably don't need to worry about it, but you might want to change your browser locale to test it.
I use Thymeleaf and I want to show the user the existing date value before they edit it, and also in case they don't want to edit it they can just leave it as is. I've been trying to set a date input value but it's not working.
What I tried:
Artist:
private Date dateDebut;
Controller:
String dateDebut = Artist.getDateDebut().toString();
model.addAttribute("dateDebut", dateDebut);
View:
<input type="date" class="form-control" name="dateDebut" th:value="${dateDebut}" />
However this doesn't work. It still shows me the date input like this: https://i.stack.imgur.com/MdZIw.png instead of the set value that I'm trying to show.
I have tried using Bootstrap datepicker but it didn't work either. Any suggestions please?
If you use type="date", then the browser gets to choose the format of the date. If you want to format it yourself, you have to use type="text".
th:value="${dateDebut}" won't respect your #DateTimeFormat annotation. If you want thymeleaf to output in that format you should either use use double-brace syntax -- th:value="${{dateDebut}}" for example -- or use th:field instead (which would mean other changes). The former is probably better in this case.
Edit:
If you want to use type="date", keep the annotation #DateTimeFormat (pattern="yyyy-MM-dd") and use double-brace:
<input type="date" class="form-control" name="dateDebut" th:value="${{dateDebut}}" />
Alternatively, you can use the date formatting functions:
<input type="date" class="form-control" name="dateDebut" th:value="${#dates.format(dateDebut, 'yyyy-MM-dd')}" />
I am unable to get an initial date when using html5's <input type="date>
Here is what I have
<input type="date" [(ngModel)]="testDate" />
in the component (this is in typescript) I am doing
testDate = new Date();
I have tried create a directive for the date field but
ElementRef.nativeElement.value = 'some date string'
doesn't seem to have any affect on the date being displayed. I've tried many different variations on the date string ('01-01-2016', '01/01/2016', '2016-01-01', and '2016/01/01'). If I change the text field then the ngModel field updates as expect. I am just having trouble with the initial date being displayed
The format for the string I needed was 2016-01-01. FYI, I would recommend not using input type="date". It's nothing but a headache.