I have a spring boot application that is sending an entity to the browser with a LocalDate field, the form field that receives this value in the browser is a jquery ui datepicker, I have added js code to format it to the same format but for some reason when I send today's date (June 5th 2020) it displays as MM/dd/yyyy even tough the value in the html source code seems to be correct. Any idea how to fix the display on the jquery ui datepicker?
Entity date field
#DateTimeFormat(pattern = "dd/MM/yyyy")
#Column(name = "data",columnDefinition = "DATE")
private LocalDate data;
Controller code piece
LocalDate myDate = LocalDate.now();
//this is the entity being sent to browser
Expense myExpense = new Expense();
myExpense.setData(myDate);
model.addAttribute("expense",myExpense);
Java script for datepicker
$(document).ready(function(){
$("#data").datepicker();
$("#data").datepicker( "option", "dateFormat", "dd/mm/yy" ).val();
});
In the link is a picture of the date displayed incorrectly as MM/dd/yyyy for (June 5th 2020) as if it was (May 6th 2020)
Html data source
<div class="form-group row">
<label for="data" class="col-sm-4 col-form-label">Data</label>
<div class="col-sm-8">
<input type="text" class="form-control text-info" id="data" required name="data" value="05/06/2020"/>
</div>
</div>
Related
I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?
Note: I checked it in SO and could not find any Question/Response that help related to this issue. Please guide me if it already exists.
I am using Angular Bootstrap's ui-datepicker library.
I am currently embedding the calender on the page. I am using angular.js, Bootstrap.css
Highlight today's date by default
Select another date will highlight the selected date. But, losing the highlight for the today's date.
Disable the previous dates in the respective month.
Here is the sample code:
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<div style="display:inline-block; min-height:290px;">
<datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></datepicker>
</div>
</div>
Here is the Link to Plunkr
Any suggestions (regarding highlight today date when i select another date) will be appreciated.
You can use custom-class(date, mode) attribute. You actually already use it in your plunker. In this attribute you can include an expression that will return a custom class based on passing date and mode.
In your case you correctly define this attribute in datepicker element:
<datepicker ng-model="dt" min-date="minDate"
show-weeks="true" class="well well-sm"
custom-class="getDayClass(date, mode)"></datepicker>
You just have to change getDayClass function and make it do what you want to do: return a css class that highlights current date's button no matter what date is selected in datepicker.
$scope.getDayClass = function(date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0,0,0,0);
var currentDay = new Date().setHours(0,0,0,0);
if (dayToCheck === currentDay) {
return 'highlight-current-date';
}
}
return '';
};
Of course, add highlight-current-date class to you css file.
.highlight-current-date button {
background: aqua;
}
Check updated plunker here.
I am trying to use angular-bootstrap datepicker module in my app and encountered small problem. I use input text and button for displaying date like this:
<div class="row" id="datePicker">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="currentDate"
is-open="opened" datepicker-options="dateOptions" date-disabled="disableDt(date, mode)"
ng-required="true" close-text="Close" show-button-bar="false" ng-init="" readonly/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
And due to using angular google maps I have to manually bootstrap my app. It seems that due to manual bootstrapping, datepicker is unable to properly format the date and displays whole unformatted date. As I choose any date from datepicker, date is then displayed correctly in the input field. What is more, model changes don't force format to change (e.g. initially I got some dates from json file and they were displayed in the field, but without formatting too).
Example below:
Initial date: Fri Jan 17 2014 01:00:00 GMT+0100 (CET)
Expected date (and one displayed after choosing the same day): 17 January 2014
Is there any way of refreshing this widget so it knows proper formatting at the beginning or changing it at the proper moment to initialize properly?
EDIT: As I moved datepicker to fragment, it should not have problems with not initialized model (this fragment is loaded later). Still, problem occur - date is not formatted and seems not to be connected with formatter or model at all (e.g. making format dropdown and choosing different values as in tutorial doesn't work until date is chosen inside datepicker).
EDIT 2 Solution from the link provided by camden_kid worked! :) Details in his comment.
Answer could be found here:
AngularJS 1.3 - Datepicker initial format is incorrect
I manually formatted the date on initialization as below:
$scope.currentDate = $filter('date')(new Date(), $scope.format);
However, better solution would be to overload directive as follows (taken from the original link):
angular.module('myApp').directive('datepickerPopup', function (dateFilter, datepickerPopupConfig) {
return {
restrict: 'A',
priority: 1,
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
var dateFormat = attr.datepickerPopup || datepickerPopupConfig.datepickerPopup;
ngModel.$formatters.push(function (value) {
return dateFilter(value, dateFormat);
});
}
};
});
When date was changed by datepicker afterwards, datepicker itself handled any date formatting :)
Thanks to #camden_kid for providing the link! :)
I use JQuery UI to input dates and use DatePicker for that.
I need to have date displayed like yyyy-mm-dd.
I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker
$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });
returned in the console:
[<input class="date-input hasDatepicker" name="TRAVELDAY_TO" title="Enter date you plan to go to your destination" placeholder="Go to date" type="date" value="2014-05-08 00:00:00" id="dp1399632827005">,
<input class="date-input hasDatepicker" name="TRAVELDAY_FROM" title="Enter the date when you plan to come back" placeholder="Come back date" type="date" value="2014-05-13 00:00:00" id="dp1399632827006">]
But no changes took effect.
So, how to change the displayed date format in Datepicker ?
Later edit:
If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.
So, how to change the displayed date format in Datepicker when input has the type="date" attribute?
refer this working jsfiddle
<input type="text" value="" class="date-input" id="TxtStrtDate" >
$(".date-input").datepicker({
dateFormat: 'yy-dd-mm'
});
What you are doing is the right way to format the datepicker in jQuery UI.
See here: http://jsfiddle.net/abhitalks/w5YQk/
HTML:
<input id="dated" />
jQuery Code:
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
Update (based on your comment on HTML5 date type):
Without repeating what has already been described here:
Is there any way to change input type="date" format?:
The short answer is that the wire format in specifications is
"yyyy-mm-dd", but the browsers are free to decide on the
presentation. Some browsers (like Chrome) present the date as in
client machine's regional settings, whereas others (like Opera)
present the wire format. So, you can't do much here.
The jQuery UI datepicker will fail when the input is HTML5 date
type. In fact it will work only when the format is set, and that
will convert itself to the wire format of the date type input! So,
again you can't do much here.
Ideally, you should present a jQuery (or any other) datepicker
only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.
So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.
You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)
If you want to do it yourself, then this example will help you (explanation embedded as code comments):
Demo: http://jsfiddle.net/abhitalks/w5YQk/3/
HTML:
<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->
jQuery Code:
var dtType;
// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
// We check the type of the second element
dtType = document.getElementById("dated2").type;
/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/
if (dtType == "text") {
// Attach datepicker only if type is "text"
$("#dated2").datepicker();
}
This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.
Hope that helps.
Currently I'm using bootstrap datetimepicker which allows user to select date.
But when I run it in different laptops i get different format for the date.
For example in my laptop when i run the app and check the value that is being passed in my post method i get something like this
8/27/2013 12:00:00 AM
but when i run the app in someone else's laptop i get this value in the post method
1-1-0001 00:00:00
this results to invalid modelstate in my controller's post method.
I have no idea why this is happening. Can someone give me some suggestion and how can I solve this issue and make the datetime format always look like 8/27/2013 12:00:00 AM post method?
Here is the code in view
<div id="datetimepicker2" class="input-append date">
<input name="DateEntered" type="text"/>
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true
});
});
</script>
'Try setting the format for the datetimepicker explicitly:
<script type="text/javascript">
$(document).ready(function() {
$('#datetimepicker2').datetimepicker({
language: 'en',
pick12HourFormat: true,
format: 'MM/dd/yyyy hh:mm:ss'
});
});
</script>
UPDATE
Try tagging the view model property or action method argument with the DisplayFormat attribute:
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy hh:mm:ss}")]