How to format date using message.properties on thymeleaf? - thymeleaf

I'm using thymeleaf and I need to format this field to a specific date. It's working the way it is, but I need the date format to be into the message.properties.
So this is working:
<input type="text" id="dtFrom" class="form-control " placeholder="yyyy-MMM-dd" th:attr="placeholder=''+#{default.date.format}+''" autocomplete="off" th:name="startDate" th:value="${srchCmd.startDate}?${#dates.format(srchCmd.startDate, 'yyyy-MMM-dd')}">
</input>
But instead I need something like this:
<input type="text" id="dtFrom" class="form-control " placeholder="yyyy-MMM-dd" th:attr="placeholder=''+#{default.date.format}+''" autocomplete="off" th:name="startDate" th:value="${srchCmd.startDate}?${#dates.format(srchCmd.startDate, #{default.date.format})}">
</input>
When I select the date instead of having the date formatted on the text input I have this:
??welco12e.12essage_en_US??
How is the right way to use #{} inside ${}? Not sure if that's the problem though.

My usage is slightly different, but, I was able to get the basic concept to work using:
<span th:text="${#dates.format(timestamp, #messages.msg('timestampFormat'))}">10/31/2018 11:59:07 -0500</span>
where my messages.properties file contains a (valid) value for 'timestampFormat', and timestamp is an available Model attribute (type Instant, for java8).
Note that I had to use #messages.msg('key') explicitly here.

Related

How to manually add MVC client-side validation?

I'm using jquery (unobtrusive) validation for MVC, and I have a field that is not a part of my model, so I'd rather not add it JUST to give it some data annotations.
And, all I need is to ensure that the value is equal to 100 ... I'd like this validated along with everything else.
I read this article: http://www.blinkingcaret.com/2016/03/23/manually-use-mvc-client-side-validation/
And, I added
data-val="true"
As well as
data-val-equalto="100"
But this didn't work.
<input type="text" name="smtotal" id="SMTotal" class="form-control " readonly="readonly" data-val="true" data-val-equalto="100"/>
<span class="field-validation-valid" data-valmsg-for="smtotal" data-valmsg-replace="true">This must equal 100</span>
There are a few issues. First, the data-val-equalto is where you put the error message that you want to display, not the value that you want to compare with. Also the equalto validator compares with a value in another field, not an arbitrary value like 100. You will have to provide the name of the other field in the data-val-equalto-other attribute.
To compare with a fixed value like 100, you can use the range validator and use the same value for the minimum and maximum, like this:
<input type="text" name="smtotal" id="SMTotal" class="form-control" readonly="readonly"
data-val="true" data-val-range="This must equal 100"
data-val-range-min="100" data-val-range-max="100" />
<span class="field-validation-valid" data-valmsg-for="smtotal"
data-valmsg-replace="true"></span>
Notice that I didn't provide a message in the span, because the message is coming from the input. If you want to put the message in the span, then you have to set data-valmsg-replace to false.

set textbox value with razor only uses numeric portion

I am setting the value "30 Day Report" to
<input type="text" value=#Model.rpt.ReportDescription.ToString() />
But the value ends up being only "30". I verified this using chrome developer tools. It works if I use #Html.TextBox() or #Html.TextBoxFor() so I know the value comes through, but I don't want to use any html helpers. How can I make the value display properly without html helpers?
Thank you.
You forgot the quotes " around the value:
<input type="text" value="#Model.rpt.ReportDescription.ToString()" />
// ^ ^

Format date value in material design to remove time

I have the following input on my form:
<md-input-container class="md-block" flex>
<label>Install Date</label>
<input type="text" date="yyyy-MM-dd" ng-model="selectedCompanyDetail.InstallDate" disabled>
</md-input-container>
As you can probably tell, I want the date displayed with this format yyyy-MM-dd. However, what I am getting is this: 1993-01-01T00:00:00.
It looks correct if I do this:
<md-input-container class="md-block" flex>
<label>Install Date</label>
<input type="text" ng-model="selectedCompanyDetail.InstallDate | date:'yyyy-MM-dd':'UTC'" disabled>
</md-input-container>
But, I get this error in the developer tools:
angular.js:13307 Error: [ngModel:nonassign] http://errors.angularjs.org/1.5.0-rc.2/ngModel/nonassign?p0=selectedCompanyDetail.InstallDate%20%7CNaNate%3A'yyyy-MM-dd'%3A'UTC'&p1=%3Cinput%20type%3D%22text%22%20date%3D%22yyyy-MM-dd%22%20ng-model%3D%selectedCompanyDetail.InstallDate%20%7C%date%3A'yyyy-MM-dd'%3A'UTC'%22%20disabled%3D%22%22%class%3D%22ng-pristine%20ng-untouched%20ng-valid%22%3E
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js:6:421
I can still use the view, but every date field has this same error.
I have many date fields and don't want to add a filter to each one as suggested here: AngularJS get formatted date in ng-model
There has to be a native way to format a date input like a date without the time.
Suggestions or ideas?
You can use this package to handle any kind of date and time manipulation. https://github.com/urish/angular-moment
I use it like this.
selectedCompanyDetail.InstallDateNewFormat = moment(selectedCompanyDetail.InstallDate).format('YYYY-MM-DD');
You must another model to store this new date since md-datepicker only allows data javascript object. while this format returns plain text(string).

thymeleaf: th:value is ignored when using th:field

I've got a form where I want to edit some user data.
So the already stored data is put as th:value and after sending I validate with spring validation and want to give back the form on wrong input. I want the input field to have the value of the input by the user but it always gives me the stored input instead.
That's how an input field looks like
<input type="text" th:value="${product.name}" th:field="*{name}" th:errorclass="fieldError"/>
If the form is loaded the first time the input fields should have the value of the already stored data.
If it's loaded after submit and with an validation error, the input fields should have the value of the user's input.
Is there a way to to that?
Thanks!
Attribute th:field will replace attributes value, id and name in your input tag.
Instead, use plain th:id, th:value and th:name without using th:field. Then you will get what you wanted.
Then it will look like:
<input type="text" th:value="${product.name}" th:name="name" th:id="name" th:errorclass="fieldError"/>
Similar answer is here: How to set thymeleaf th:field value from other variable
Because Attribute th:field is Combination of both th:name and th:value
So, either use this:
<input type="text" th:value="${product.name}" th:name="name" th:errorclass="fieldError"/>
Or this:
<input type="text" th:field="*{name}" "th:errorclass="fieldError"/>
Using th:field or value, id and name is ok. if you user th:field, you can write this:
<input type="text" th:field="${product.name}" th:value="${product.name}" "th:errorclass="fieldError"/>
You have error in your controller (you set wrong value to *{name}), if the input value is wrong after validation error.

How to add specific attribute (like "multiple") to Thymeleaf templates?

I have this:
<input id="fileupload" type="file" name="files[]" data-url="rest/controller/upload" multiple>
and I need to make it work in a Thymeleaf template. I have the data-url part figured out but I keep getting an error on the word "multiple". This is needed to allow multiple selection in the file selection window.
I have looked everywhere and have not come across an answer.
EDIT:
If you are not familiar, here is the "multiple" attribute.
http://www.w3schools.com/tags/att_input_multiple.asp
The Standard Dialect of Thymeleaf includes attributes that allow you to set these attributes by evaluating a condition, so that if evaluated to true, the attribute will be set to its fixed value, and if evaluated to false, the attribute will not be set:
e.g for checkedattribute:
<input type="checkbox" name="active" th:checked="${user.active}" />
you have to use:
th:multiple
e.g
<input id="fileupload" type="file" name="files[]" th:multiple="{condition}">
see a tutorial here.

Resources