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).
Related
I have a razor view (MVC5) with 2 date fields (Effective Date and Action Date), I am trying to accomplish the following: the moment a date has been chosen from the date picker for Effective Date then I want that chosen date to be shown directly in the Action Date field, basically, the effective date and the action date should always be the same. What is the best and cleanest way to accomplish this?
I think use js is a good choice.Here is a demo:
View:
<input id="Effective" type="date" />
<input id="Action" type="date" />
<script>
$("#Effective").change(function () {
$("#Action").val($(this).val());
})
</script>
Result:
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.
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
I have the following element:
<div class="input-group bootstrap-timepicker">
<input type="text"
class="form-control timepicker"
name="start-time"
ng-model="timeSegment[0]"/>
<span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
<i class="icon icon-time"></i>
</span>
</div>
It is contained in an ng-repeat that repeats this element multiple times. The above code snippet works perfectly, and correctly displays the correct model values when it is loaded, but uses a text box to enter time instead of timepickers. My model value 'timeSegment[0]' is a string in the format 'hh:mm a', for example '04:00 AM'.
However, as soon as I added the bs-timepicker attribute to the above elements (to allow time to be entered using timepickers instead of textbox):
<div class="input-group bootstrap-timepicker">
<input type="text"
class="form-control timepicker"
name="start-time"
ng-model="timeSegment[0]"
bs-timepicker/>
<span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
<i class="icon icon-time"></i>
</span>
</div>
they showed a default time instead of the values from my model. It was picking up my model correctly, since it correctly iterated the right number of elements and showed the timepicker for them, just not the right value in the timepicker.
Whats also strange is that although the timepickers show a default time, as soon as I change one of them, the value is correctly updated in my model.
I thought it may be because time is my model is a string, and not a date, but even adding attributes described here http://mgcrea.github.io/angular-strap/#/timepickers, such as the following, made no difference. I also tried making my model a Date object, but again, no difference.
data-modelTimeFormat="hh:mm A"
data-timeType="string"
I ended up using a different timepicker, which works as expected:
https://angular-ui.github.io/bootstrap/
Even if you're only using the timepicker to allow time to be selected, its value needs to be a full date. Make the value of your ng-model an arbitrary date and set it to the time you need e.g.
var myDateTime = new Date("01-Jan-1970 00:00:00");
ng-model = myDateTime;
I am trying to use Grails Calendar plugin - https://grails.org/plugin/calendar for getting a date picker. The way I am using this is
<calendar:resources/>
<calendar:datePicker name="startDate" value="${prePopulatedValue}" dateFormat="%Y-%m-%d"/>
Calendar is rendered properly but when I submit the form, the value for field startDate is 'struct'
When I check the rendered html code, there is a hidden field for startDate with value 'struct' and the correct value is under field 'startDate_value'
<input type="hidden" name="startDate" id="startDate" value="struct">
<input type="text" id="startDate_value" name="startDate_value" readonly="true">
Now in my code I have placed this calender code in a template and its value is being used in javascript at lot of places.
I am using this code while trying to upgrade my Grails application and not writing it from stratch. So updating all the javascript code and appending "_value" involves lot of work.
In older version of my Grails application, calendar was rendered using YUI which now has issues, so I am trying calendar plugin.
Is this (getting 'struct' as the value) an issue with Grails calendar plugin ? Is there any workaround ? Thanks.
don't know if it would of some help for you...
I have a small taglib for a datepicker, which in turn, uses the jquery datepicker and have - of course - also a hidden DateField with a struct value. It needs - beside of that - also fields for day, month and year to work seamlessly with grails.
I use my taglib in some of my projects (grails 2.x.x projects) without changing the grails-logik etc. Works seamlessly.
You need - of course - the jquery + datepicker javascripts in your page...
If it might help, here's the url: jquery-datepicker-taglib
It was once a quick hack, and my first taglib, because of that it might not be as nice coded as you would expect, but since than, it works in a lot of use-cases... :-)
...
I don't know the plugin you mentioned, but in general, the grails 2.x date-field consists of 4 fields:
<input type="hidden" name="reDat" id="reDat" value="date.struct" />
<input type="hidden" name="reDat_day" id="reDat_day" value="" />
<input type="hidden" name="reDat_month" id="reDat_month" value="" />
<input type="hidden" name="reDat_year" id="reDat_year" value="" />
normaly not of type hidden.
But in my case, I have an additional field for the datepicker and populate after changing the date the grails-fields for the date, that the rest of grails can go working without any other/additional action taken...