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:
Related
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 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...
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).
The situation
I want to use ui-date to set/edit a date in my app. I use the latest stable versions of angular, angular-ui, jquery-ui etc.
The problem
As soon as a date is selected using the datepicker the date in my model will equal the selected date minus 1 day. It will also get send to my server and saved in my database this way.
The plunker
http://plnkr.co/edit/Ft14Wa?p=preview
Initially the date in the datepicker input and the date in my model are the same. After picking a date they differ.
The question
What is going (wr)on(g) here???
ui-date expects your model to be an actual date object. In your case it's a string. If you take a look at the console you'll see that angularUI actually informs you about that. Then it advises you to add additional ui-date-format tag with the specified date format with which your date string will be parsed into date object.
Long story short, your need to adjust your input as this:
<input ui-date="{dateFormat: 'yy-mm-dd'}" ui-date-format="yy-mm-dd" ng-model="customer.contract_end_date"></input>
Working plunker.
this solves my problem.
angularjs uses default timezone which considers hour time. seting timezone option of ng-model to UTC clear hour times......
ng-model-options="{timezone:'UTC'}"
The problem is that angular is using its default timezone when parsing the date selected on the datepicker. To resolve the issue you can use the ng-model-options directive which accepts a "timezone" parameter.
<input type="text" ng-model-options="{timezone:'UTC'}" ... >
I set date format as dd-mm-yyyy as my requirement. then set date-type as string.
<input type="text" class="form-control col-xs-9"
data-date-format="dd-MM-yyyy" data-autoclose="1"
ng-model="modelName"
date-type="string" bs-datepicker required>
I'm using a jQueryUI datepicker for a simple "From" & "To" date range filter in my ASP.Net MVC web-app. Works fine until I hit a machine which had its datetime format (in the Regional Settings) set to "dd-MM-yy".
In my controller I've a postback action which accepts a custom search object as a parameter which is then passed to the search function. This custom object has the properties for "To" & "From" dates and as usual the binding takes place automatically. Works normal on a machine with date format "MM/dd/yy" but if I set it to "dd/MM/yy" in the regional settings then it is unable to parse the date.
The easiest solution could be to change the datepicker's format to
"dd-MMM-yyyy" a non-culture specific date format but my client wants
the selected date to be displayed in MM/dd/yyyy format.
Any clean and easy suggestion to handle this at the datepicker or controller level?
You can use an hidden field with a custom format:
HTML:
<input name="from" type="text" id="from" />
<input name="hiddenFrom" type="hidden" id="hiddenFrom" />
Javascript:
$("#from").datepicker({
altField: "#hiddenFrom",
altFormat: "dd-mm-yy" // or whatever
});
You'll find documentation about jquery ui date format here