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')}" />
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'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 have an input type date like this:
<input type="date" class="form-control" name="tglmsk" id="tglmsk" value="2013-01-08">
But everytime i open it, the date value doesn't show on the input box, i already try to use this format on the :
yyyy-mm-dd (2013-01-08)
dd-mm-yyyy (08-01-2013)
But both of them didn't work
The type="date" inputs have partial browser support. If you're not using IE or Safari, then try localising your HTML with the lang attribute. The value preset of YYYY-MM-DD is correct and should work.
Keep in mind, if you change the date in the field you won't see it in the DOM inspection. The presentation and the actual submission value should be correct, though.
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 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.