dateTimePicker UTC Bootstrap - asp.net-mvc

Each time that I choose a value from the datetimepicker and I send the info to the controller on the server side we are receiving a different time on the server side."caused by the UTC"
I would like to know how to apply the UTC time on the datepicker in order to avoid this error.
<input type="text" id="datePickId" class="form-control" ng-model="dateFrom" datepicker-popup="{{'dd-MM-yyyy'}}" is-open="openedTo" close-text="Close" />

http://momentjs.com
You might want to use moment.js plugin for date handling on javascript, in the controller you simply do the follow:
var tmp = moment($scope.dateFrom).utc().format();
or
var tmp = moment.utc($scope.dateFrom, 'MM-DD-YYYY').format();
It returns the UTC time formatted, hope it helps

Related

datePicker showing one day previous wrong day in grails

In edit and print (html print) mode, I have get one day previous date. I have used mysql database. My domain like
class Immunization {
------
Date doseOneDue
Date doseOneGiven
----
}
I have use datepicker in view like
<g:datePicker name="doseOneDue" precision="day" noSelection="['': '']"
value="${immunizationInstance?.doseOneDue}"
relativeYears="[-5..5]" default="none"/>
Now problem is:
suppose doseOneDue is '2015-08-30', But when I showing it in datePicker in edit mode then it is selecting '29 - 08 - 2015', Also in html print option showing also one day less. How can handle this problem.

grails datepicker only provides default date to controller

When I attempt to use the grails datepicker, when I try out the page the value that gets sent to the controller is the default value, not the actual date value that I've chosen in the datepicker fields.
I'm using the grails datepicker in my simple index.gsp page:
<g:form action="show">
game ID: <g:textField name="gameId" value=""/><br/>
switch date: <g:datePicker name="switchDate" value="${new Date()}"/><br/>
<g:submitButton name="submit" value="submit"/>
</g:form>
my equally simple show controller:
def show(long gameId, Date switchDate) {
println("gameId:$gameId switchDate:$switchDate")
}
I'm guessing I'm missing something obvious. Thank you in advance.
I think this has to do with the Date not being bound properly. If you access it through params.switchDate or change the parameter to be of type String:
def show(long gameId, String switchDate) {
then it works.
Alternatively you can follow the steps from this question to set up proper data binding for the Date, i.e. by setting:
grails.databinding.dateFormats = ['MMddyyyy HH:mm:ss']
in your Config.groovy.

Date-picker date format and datepicker options

i have a few problems with the date-picker, especially regard the date format.
I need to make a date-format like that 'ddMMyyyy' without symbols like slash or minus.
this is my Markup
HTML
<input type="text" datepicker-popup="{{format}}" show-weeks="false" ng-model="Fromdate" show-button-bar='false'>
and that's my format in javascript
JS
$scope.format='ddMMyyyy';
is this the right way to make the format?
Because if i choose the date from the datepicker nothing seems to go wrong but if i type directly the text a errors happens.
the first four number were evaluated like year, so if i type '01022014' i aspect first february 2014 instead the date-picker evaluate 14 of no month (20 is not a month) of the 0102 year.
Second question, i'd like to put the option of the date Picker in the js file and not in the markup, for example:
HTML
<input type="text" datepicker-popup="{{format}}" ng-model="Fromdate" datepicker-options="options">
js
$scope.options={
show-weeks:"false"
show-button-bar:'false'
}
but in that way it seems doesn't work, what is thee right way to do that?
Use Uib-Datepicker
Js:
$scope.dateOptions = {
showWeeks: false,
format: 'ddMMyyyy'
};
HTML:
<uib-datepicker ng-model="selectedDate" datepicker-options="dateOptions" ng-required="true"></uib-datepicker>

Grails input error: property must be a valid date

I have a text input that uses custom date and time picker script.
<div class="input-group date datetime" data-start-view="4" data-date-format="dd MM yyyy" data-min-view="2" data-link-field="dtp_input1">
<input name="dateOfBirth" class="form-control" size="16" type="text" value="${userInstance?.dateOfBirth}"/>
<span class="input-group-addon btn btn-primary"><span class="glyphicon glyphicon-th"></span></span>
</div>
It gives me this error
Property org.springframework.context.support.DefaultMessageSourceResolvable: codes [rms.User.dateOfBirth,dateOfBirth]; arguments []; default message [dateOfBirth] must be a valid Date
I dont how to solve this. Using the grails dateTime picker tag seems to work but its ugly
The only way is to use SimpleDateFormat. I often use it for forms with a JS-calendar inside:
class YourController {
static SimpleDateFormat sdf = new SimpleDateFormat( 'dd.MM.yyyy' )
def index(){
Date dateOfBirth
try{
if( params.dateOfBirth ) dateOfBirth = sdf.parse( params.dateOfBirth )
}catch( Exception ignoreMe ){}
// do something useful
}
UPDATE:
You must use the propper date format of course. The one I gave in my example dd.MM.yyyy corresponds to 08.02.2014. For strings like February 08 2014 you are gonna need something like MMM dd yyyy.
See http://docs.oracle.com/javase/7/docs/api/java/text/SimpleDateFormat.html for further info

How to make jqueryUI datepicker submit in a different format than what is being displayed?

I'm working on some internationalization using jQueryUI. I have a DatePicker control on a form that is properly working in the French language.
When I select a date, for example August 15, 2012, the DatePicker will display 15 Aoû, 2012 as I would expect. My issue however, is that when the form is posted, the value of the DatePicker is posted as '15 Aoû, 2012' which now needs to be translated on the server before it can be saved properly.
My question is, is there a built-in way inside the jQueryUI DatePicker so that I can have it always post to the server in a consistent format, regardless of which language the control is being displayed in? If there isn't a built-in way, what options exist for achieving this?
I realize that I can change the dateformat to something like 08/15/2012 instead of using the textual representation, however this isn't what I want to do.
There's 2 configuration options for that: altField and altFormat. http://api.jqueryui.com/datepicker/#option-altField
If you specify an altField, that field will be updated too, and will have the altFormat.
Normally you will want make the altField a hidden field, soyou can ignore the regular field and send to db the altField.
As you'll have noticed, supplying a dateFormat works well for newly entered dates, but it does not alter the value attribute which was already supplied to the date input field. It took me some time and I'm not sure whether this solution is ideal, but here's my situation explained and the code which solves it. Might help others with the same problem in the future. In my example I'm using dd/MM/yyyy as the display format.
The page contains any number of date input fields, which may or may not already have a value attribute supplied in the format yyyy-MM-dd, as specified by W3C.
Some browsers will have their own input control to handle dates. At the time of writing, that is for instance Opera and Chrome. These should expect and store a date in the abovementioned format, while rendering them according to the client's regional settings. You probably do not want/need to create a jqueryui datepicker in these browsers.
Browsers which don't have a built-in control to handle date input fields will need the jqueryui datepicker along with an 'alt', invisible field.
The invisible, alt input field with the yyyy-MM-dd format must have the original name and a unique id in order for forms logic to keep working.
Finally, the yyyy-MM-dd value of the display input field must be parsed and replaced with its desired counterpart.
So, here's the code, using Modernizr to detect whether or not the client is able to natively render date input fields.
if (!Modernizr.inputtypes.date) {
$('input[type=date]').each(function (index, element) {
/* Create a hidden clone, which will contain the actual value */
var clone = $(this).clone();
clone.insertAfter(this);
clone.hide();
/* Rename the original field, used to contain the display value */
$(this).attr('id', $(this).attr('id') + '-display');
$(this).attr('name', $(this).attr('name') + '-display');
/* Create the datepicker with the desired display format and alt field */
$(this).datepicker({ dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" });
/* Finally, parse the value and change it to the display format */
if ($(this).attr('value')) {
var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
$(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
}
});
}
<input type="text" name='fieldName' id="datepicker" value="" style="width: 100px;" />
<script type="text/javascript">
$( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );
$( "#datepicker" ).datepicker();
</script>
It appears someone else had this question or a similar one prior to yours.
If you read this stackoverflow answer, the author was trying to show the date in one format and pass the data to MySQL in another format.
The prior answer in that link gets you set up to access the selected value as a variable. Now all you need is to wire in a parseDate to your selected date variable.
<script type="text/javascript">
$('#cal').datepicker({
dateFormat: 'dd M yy',
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
}
});
</script>
Check the parseDate link for settings and formatting.
Hope this helps!
Basically, you should not re-format the date. Instead, you should read JavaScript's Date object from Datepicker, via getDate() method. Then, you need to pass it to server.
The question is how. Basically, what you want is some common format. If you use JSON the answer is very simple, just put date object and JSON's stringify() function will automatically format it to ISO8601.
As you may see from Wikipedia, ISO8601 was designed to interchange date and time reliably, therefore that's what you should use.
It might be helpful to know that modern web browsers support Date object's toISOString() method.
As #Pawel-Dyda mentioned,
There's a
getDate() method
var currentDate = $( ".selector" ).datepicker( "getDate" );
Here's an example of what it returns: Wed Jan 20 2016 00:00:00 GMT+0300.
You can parse it in Javascript, PHP, in SQL or whatever.
MySQL parsing examlple:
select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');
Returns:
2016-01-20 00:00:00
Solution working for ASP.NET
#using (Html.BeginForm("ActionName", "ControllerName"))
{
#Html.HiddenFor(m => m.DateFrom)
#Html.HiddenFor(m => m.DateTo)
<div class="form-group">
#Html.LabelFor(m => m.DateFrom)
<input id="datepicker-date-from" type="text" class="form-control datepicker" value="#Model.DateFrom.Date.ToString("dd.MM.yyyy")"/>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DateTo)
<input id="datepicker-date-to" type="text" class="form-control datepicker" value="#Model.DateTo.Date.ToString("dd.MM.yyyy")" />
</div>
<input type="submit" class="btn btn-sn btn-primary" value="Download" />
}
#section scripts {
<script type="text/javascript">
$(function () {
$("#datepicker-date-from").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateFrom),
altFormat: "yy-mm-dd"
});
$("#datepicker-date-to").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateTo),
altFormat: "yy-mm-dd"
});
});
</script>
}

Resources