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.
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');
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");
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 )
I have an HTML5 date input and I would like its value to be set to the value of the date property in my model by default. I'm not too fussy about formatting since Chrome seems to decide that for me anyway based on my locale, but ideally the format would be consistently dd/MM/yyyy.
Fiddle
This is how I set up my input:
<input type="date"
ng-model="date"
value="{{ date | date: 'yyyy-MM-dd' }}" />
This works fine on Chrome, and I see the following by default:
(I still don't quite understand why the value had to be given in yyyy-MM-dd, if Chrome still formats it based on my locale, but that's a different question.)
My issue is with Firefox not showing the date's value in the way I've specified. I think this has to do with binding the input to the date model, because I can specify pretty much any string in the value attribute, and I will still see the long date string in the input by default:
If I remove ng-model="date" from the input tag, Firefox nicely displays any value I give it. I didn't think the model that an input was bound to actually had any effect on its default value?
I understand the date input isn't supported universally, but seeing as it's supposed to fall back on a simple text input, I don't see why its value won't simply be 2013-08-05, as specified by angular's date filter.
So, how do I get Firefox to accept my formatted value in the date input?
NOTE After the edits have been done by the user, I will of course perform validation and convert each date input value into a proper Date object. Not sure if this is relevant to the question, but putting it out there just in case, because the input formats would obviously need to be consistent for the date conversion to work the same in all browsers. Problematic, of course, with Chrome deciding the input format for me...
The problem is that value is ignored when ng-model is present.
Firefox, which doesn't currently support type="date", will convert all the values to string. Since you (rightly) want date to be a real Date object and not a string, I think the best choice is to create another variable, for instance dateString, and then link the two variables:
<input type="date" ng-model="dateString" />
function MainCtrl($scope, dateFilter) {
$scope.date = new Date();
$scope.$watch('date', function (date)
{
$scope.dateString = dateFilter(date, 'yyyy-MM-dd');
});
$scope.$watch('dateString', function (dateString)
{
$scope.date = new Date(dateString);
});
}
Fiddle
The actual structure is for demonstration purposes only. You'd be better off creating your own directive, especially in order to:
allow formats other than yyyy-MM-dd,
be able to use NgModelController#$formatters and NgModelController#$parsers rather than the artifical dateString variable (see the documentation on this subject).
Please notice that I've used yyyy-MM-dd, because it's a format directly supported by the JavaScript Date object. In case you want to use another one, you must make the conversion yourself.
EDIT
Here is a way to make a clean directive:
myModule.directive(
'dateInput',
function(dateFilter) {
return {
require: 'ngModel',
template: '<input type="date"></input>',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, 'yyyy-MM-dd');
});
ngModelCtrl.$parsers.unshift(function(viewValue) {
return new Date(viewValue);
});
},
};
});
Fiddle
That's a basic directive, there's still a lot of room for improvement, for example:
allow the use of a custom format instead of yyyy-MM-dd,
check that the date typed by the user is correct.
Why the value had to be given in yyyy-MM-dd?
According to the input type = date spec of HTML 5, the value has to be in the format yyyy-MM-dd since it takes the format of a valid full-date which is specified in RFC3339 as
full-date = date-fullyear "-" date-month "-" date-mday
There is nothing to do with Angularjs since the directive input doesn't support date type.
How do I get Firefox to accept my formatted value in the date input?
FF doesn't support date type of input for at least up to the version 24.0. You can get this info from here. So for right now, if you use input with type being date in FF, the text box takes whatever value you pass in.
My suggestion is you can use Angular-ui's Timepicker and don't use the HTML5 support for the date input.
You can use this, it works fine:
<input type="date" class="form1"
value="{{date | date:MM/dd/yyyy}}"
ng-model="date"
name="id"
validatedateformat
data-date-format="mm/dd/yyyy"
maxlength="10"
id="id"
calendar
maxdate="todays"
ng-click="openCalendar('id')">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" ng-click="openCalendar('id')"></span>
</span>
</input>
In my case, I have solved this way:
$scope.MyObject = // get from database or other sources;
$scope.MyObject.Date = new Date($scope.MyObject.Date);
and input type date is ok
I've used ng-change:
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf());
dat.setDate(dat.getDate() + days);
return dat;
}
var app = angular.module('myApp', []);
app.controller('DateController', ['$rootScope', '$scope',
function($rootScope, $scope) {
function init() {
$scope.startDate = new Date();
$scope.endDate = $scope.startDate.addDays(14);
}
function load() {
alert($scope.startDate);
alert($scope.endDate);
}
init();
// public methods
$scope.load = load;
$scope.setStart = function(date) {
$scope.startDate = date;
};
$scope.setEnd = function(date) {
$scope.endDate = date;
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="DateController">
<label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
<input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>
<button button="button" ng-disabled="planningForm.$invalid" ng-click="load()" class="button button-positive">
Run
</button>
</div <label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
<input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>
Check this fully functional directive for MEAN.JS (Angular.js, bootstrap, Express.js and MongoDb)
Based on #Blackhole ´s response, we just finished it to be used with mongodb and express.
It will allow you to save and load dates from a mongoose connector
Hope it Helps!!
angular.module('myApp')
.directive(
'dateInput',
function(dateFilter) {
return {
require: 'ngModel',
template: '<input type="date" class="form-control"></input>',
replace: true,
link: function(scope, elm, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.unshift(function (modelValue) {
return dateFilter(modelValue, 'yyyy-MM-dd');
});
ngModelCtrl.$parsers.push(function(modelValue){
return angular.toJson(modelValue,true)
.substring(1,angular.toJson(modelValue).length-1);
})
}
};
});
The JADE/HTML:
div(date-input, ng-model="modelDate")
If using Angular Material Design, you can use the datepicker component there and this will work in Firefox, IE etc.
https://material.angularjs.org/latest/demo/datepicker
Fair warning though - personal experience is that there are problems with this, and seemingly it is being re-worked at present. See here:
https://github.com/angular/material/issues/4856