JQuery DatePicker ignores DateFormat - javascript

I have a datepicker component in my C# app, which takes its default value from the server through AJAX call. The problem is, it ignores the date format I've defined as a parameter. I looked into the code and it seems that the date format is not set on the settings variable, so JQuery uses the default value (mm/dd/yy).
Here is my code:
$.when(_getUserProfileValue(defValue))
.done(function (result) {
// result is 23.07.2015
// this line shows the correct date and format
$("#divTest").text(result.d);
// new Date(res) gives back invalid date, but datepicker shows the result from server
// without this line, datepicker shows a completely wrong date
// TODO: format is still ignored
var aDate = new Date(result.d);
$calendar.datepicker({
dateFormat: "dd.mm.yy"
});
$calendar.datepicker("setDate", aDate);
})
Any ideas?

Might be because you have already initialized the datepicker on that element, in that case to update the date format of an existing datepicker use the option method like
$calendar.datepicker('option', 'dateFormat', "dd.mm.yy");

Related

Cannot get Date format using getDateTimeInstance function

I have a requirement that I need to adjust the date inside the worklist view, based on the date format set in frontend system (in GUI).
My code for formatter.js file:
DatePriority: function (sVar1, sVar2) {
var oDateFormat;
var oDateFormatFromGUI = sap.ui.getCore().getConfiguration().getFormatSettings().getDatePattern("short");
oDateFormat = sap.ui.core.format.DateFormat.getDateTimeInstance({
pattern: "EEE " + oDateFormatFromGUI,
UTC: true
});
return oDateFormat.format(new Date(sVar1));
}
However, oDateFormatFromGUI sometimes does return value, but sometimes it is undefined.
Is there a specific reason for this behavior? How can I make sure that oDateFormatFromGUI always has the data? Is it because I define it in formatter file, and not at the controller level?
Thank you.

Bootstrap Datetimepicker cannot set the date value

I'm using bootstrap datetimepicker in my project. And I'm facing the problem with setting the date value after my input control rendered.
At first I set up the datetimepicker as follow:
$(".date").datetimepicker({
defaultDate: moment(),
format: 'YYYY-MM-DD'
}).on('keypress paste', function (e) {
e.preventDefault();
return false;
});
And then I load the actual data date value of the control by calling below function:
function SetDate(control,date)
{
$('#'+ control).datetimepicker({
defaultDate: new Date(date)
});
}
And then the datetimepicker show only current date but it return correct date value that is not current date when I fetch the value with document.getElementById('elementname').value.
Kindly advise. Thanks.
I guess, for the options showed, that you are using http://eonasdan.github.io/bootstrap-datetimepicker
The way you are using the picker is wrong, because what you are doing is calling again the picker, better do it this way:
$('#myDatepicker').datetimepicker();
And then with your control/function (I will use a button triggering the action)
$('#set').on('click', function() {
SetDate("myDatepicker", moment().subtract(1, 'day'));
});
function SetDate(control, date) {
$('#' + control).data('DateTimePicker').defaultDate(date);
}
Where .data('DateTimePicker').defaultDate(date) is what set the defaultDate for later.
And where moment().subtract(1, 'day')) is taking out one day and is the parameter date, and is not necesary to parse out again as is a moment object;
If you need to parse a string date you could use:
moment('20170202','YYYY-MM-DD')
Where first parameter is your date string.
https://momentjs.com/docs/#/parsing/string-format/
Here how the options are set for the plugin http://eonasdan.github.io/bootstrap-datetimepicker/Options/
Fetch the value using the following :
$("#elementname").data('datepicker').getFormattedDate('YYYY-MM-DD');

Converting new Date() to a format that includes T

Background
I have a datepicker (Angular UI) defined like this:
<date-picker name="contractEndDate" date="employee.contractEndDate"></date-picker>
The contractEndDate is set by a button click, changing it's value from null to today.
The date is set using this:
self.HandleEmployeeEndOfContract = function () {
$scope.employee.contractEndDate = new Date().toLocaleString();
}
At the time of writing, that gives me:
26-1-2016 15:09:55
What I need
The datepicker needs the date as 26-1-2016T15:09:55 (notice the extra T). Setting contractEndDate to a date without the extra T, doesn't seem to work.
Question
Can I change the .toLocaleString() function to something that gives the date as above (incl. T)?
This is UTC format and you can achieve this using new Date().toISOString();
new Date().toISOString()
=> "2016-01-26T14:24:42.974Z"

Full Calendar Get current date

I've been learning Ruby over the last year and I'm very new to JS so I'll try to explain this as best I can.
I am using Adam Shaw's full calendar plugin. All I want to do is get the current month I am viewing (and use that to limit how far in the future or past a user can navigate, but that's not the problem).
I can get the current date, sort of. But, because of my lack of JS knowledge I'm not sure how to access the date.
Here is the relevant section of the config file,
viewRender: function(view){
var maxDate = "<%= finish.strftime('%Y/%m/%d') %>";
var currentDate = $('#calendar').fullCalendar('getDate');
console.log(currentDate);
if (view.start > maxDate){
header.disableButton('prev');
}
}
When I inspect the console log I see this being output as I click through the months.
So as you can see it is displaying the current date in view. My question is how do I access the _d bit of the Moment variable so I can use it?
My understanding would be that the Moment is class instance and the stuff in the dropdown is like its attributes, would this be a correct interpretation?
To get the current date of the calendar, do:
var tglCurrent = $('#YourCalendar').fullCalendar('getDate');
This will return the date as a moment object. You can then format it as a string in the usual date format like so:
var tgl=moment(tglCurrent).format('YYYY-MM-DD');
For the actual time, use the format: YYYY-MM-DD LTS
FullCalendar's getDate returns a moment object, so you need moment's toDate() method to get date out of it.
So, in you code try:
console.log(currentDate.toDate());
and that should return a date object.
var moment = $('#YourCalendar').fullCalendar('getDate');
var calDate = moment.format('DD.MM.YYYY HH:mm'); //Here you can format your Date

Getting value of MooTools datepicker

I am using this MooTools datepicker.
How can I get the current value (either Unix TS or date) from it with JavaScript?
My code is:
window.addEvent('load', function() {
new DatePicker('.demo_vista', {
pickerClass: 'datepicker_vista',
format: 'm/d/Y',
allowEmpty: true,
toggleElements: '.date_toggler'
});
});
I have tried the standard getElementById('mydatepicker').value but I get [object NodeList] everytime.
There are different versions of this datepicker. Some output UNIX some not.
To get the value from the input field/datepicker, If you have a id for it you can use $('mydatepicker').value or document.id('mydatepicker').value, or plain javascript like you described. Check if the value you get out $('mydatepicker').value is already UNIX. otherwise you can parse the date. 
If you don't have UNIX timestamp from the input value you can convert the date to it by using:
var unix = new Date(this.value).format('%s');
In the options (if you don't get a UNIX timestamp) you can also add inputOutputFormat: 'U', to specify UNIX should be the value of the input field (some versions have this as default). This input field is hidden because datepicker creates a clone that is the one you see. But this hidden field is the one in the html markup and so the one with ID.
Check this demo, change a date and look at console.
DatePicker options:
format - is a visible date format. Does not affect the actual output
when your form is submitted
inputOutputFormat - define how the input value of the original
datepicker input element is interpreted ( the default value U is a
Unix-timestamp )
onSelect - Event hook triggered when a date is selected
new DatePicker('.demo_vista', {
pickerClass: 'datepicker_vista',
format: 'm/d/Y',
inputOutputFormat: 'm/d/Y',
allowEmpty: true,
toggleElements: '.date_toggler',
onSelect: function( date ) {
alert( date );
alert( $('mydatepicker').value );
}
});
Default output from your form will be a Unix-timestamp unless you define inputOutputFormat option, and that value can be taken with $('mydatepicker').value ( is the same as document.getElementById('mydatepicker').value )

Categories

Resources