i have a html5 input date field,
<input type="date" data-ng-model="personalDetailsObj.personalDetails.dob" name="dob"/>
i want to send the date format to server in the following order,
2013-09-22
controller
$scope.personalDetailsObj = {
"personalDetails": {
"dob": new Date(2015, 2, 2)
}
}
$scope.submitbtn = function(){
$scope.personalDetailsObj.personalDetails.dob = $filter('date')($scope.personalDetailsObj.personalDetails.dob,'yyyy-MM-dd');
}
But i am getting error saying: Error: [ngModel:datefmt] Expected 2015-02-02 to be a date
Filter will format date as string
$filter('date')($scope.personalDetailsObj.personalDetails.dob,'yyyy-MM-dd');
And you are assign it to the model which input type is a date
$scope.personalDetailsObj.personalDetails.dob = $filter('date')($scope.personalDetailsObj.personalDetails.dob,'yyyy-MM-dd');
If input type is date then ng-model should remain as date type
Related
I'm trying to validate a YYYY-MM-DD date with the following code (parsley plugin), but i wish to show an error message with the %s value in DD/MM/YYYY format.
Is there a way to do that?
Thx!
<div class='input-group date' id='datetimepicker'>
<input type='text' name="contact-date" id="contact-date" data-parsley-mindate="2000-01-01" />
</div>
<script>
window.ParsleyValidator
.addValidator('mindate', function (value, requirement) {
// is valid date?
var timestamp = Date.parse(value),
minTs = Date.parse(requirement);
return isNaN(timestamp) ? false : timestamp > minTs;
}, 32)
.addMessage('en', 'mindate', 'This date should be greater than %s');
$('#myForm').parsley();
$('#datetimepicker').datetimepicker({
language:'en'
});
</script>
You could return a "dynamic" error message is by returning a failed promise from your validateString method. This example uses this technique.
Thank you!!
I added the following code when the validation fails and it works (it allows me to access the "%s" value to customize the message)
return $.Deferred().reject("custom message");
My HTML for date field is
<input class="form-control"type="text" name="txtOrderContractFinishDate" id="txtOrderContractFinishDate" ng-model="SelectedOrder.OrderContractFinishDate | jsDate | date:'MM/dd/yyyy'" placeholder="mm/dd/yyyy" />
jsDate function is as below
app.filter("jsDate", function () {
return function (x) {
return new Date(parseInt(x.substr(6)));
};
});
the date gets converted from JSON date format to MMddyyy format without any problem. But once after data is displayed if I try to edit the date field it is not allowing me to do so. I am new to angularjs. Can anyone help, please ?
Getting below warning and I don't see the format being displayed in input.
The specified value "{{start_time | date:'HH:mm'}}" does not conform
to the required format. The format is "HH:mm", "HH:mm:ss" or
"HH:mm:ss.SSS" where HH is 00-23, mm is 00-59, ss is 00-59, and SSS is
000-999.
<input type="time" value="{{start_time | date:'HH:mm'}}">
Current output
Expected hh:mm
Looks like you have your date in start_date and are trying to use start_time on the front-end. This should work:
<input type="time" ng-value="start_date | date : 'HH:mm'">
Example: Working Plunker
UPDATE: to allow for updating the model, you should add a filter:
.filter('parseDate', function () {
return function (date) {
if (angular.isDate(date)) return date;
return new Date(Date.parse(date.replace(/:\d{2}[.,]\d{3}Z$/, '')));
};
});
var start_time = "2017-08-29T17:15:16.814Z";
$scope.start_date = $filter('parseDate')(start_time);
Example: Working Plunker
My filter:
.filter('emedicineDateTimeFormat', function ($filter) {
return function (input) {
if (input == null) { return ""; }
var date = $filter('date')(new Date(input), 'dd.MM.yyyy hh:mm:ss');
return date.toUpperCase();
};
});
if Input is: 2017-01-04T14:30:00
then output is 04.01.2017 03:15:00
and not 04.01.2017 14:15:00
Why?
If you want get 24-hours time use upper-cased H. An example is here.
'dd.MM.yyyy HH:mm:ss'
Are you sure that you didn't misspell in output and expected result?
Do you live in UTC+01:00 timezone?
By default AngularJS uses browser timezone. If you want use UTC you should pass the 3rd argument to date filter 'UTC'. Look here.
I've got a date coming in from an API that returns the date like this: 2012-10-12 00:00:00
I'm printing it to my page like this:
<span class="year" ng-bind-html="hit._highlightResult.original_release_date.value"></span>
with original_release_date.value being that date (2012-10-12 00:00:00). Does anyone know a quick and easy way to just return the year?
Any help is appreciated. Thanks in advance!
you can use the date api in angularjs
<span class="year"> {{ hit._highlightResult.original_release_date.value | date:"yyyy" }} </span>
hit._highlightResult.original_release_date.value should be a (according to doc)
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
so create javascript date object and format it to show only the year,
step 1 - create a filter to get a date object from a string (2012-10-12 00:00:00)
app.filter('dateToISO', function() {
return function(input) {
var dateTime = input.split(" ");
var date = dateTime[0];
var datePartials = date.split("-");
var time = dateTime[1];
var timePartials = time.split(":");
var formattedDate = new Date();
formattedDate.setFullYear(datePartials[0]);
formattedDate.setMonth(datePartials[1]-1);
formattedDate.setDate(datePartials[2]);
formattedDate.setHours(timePartials[0]);
formattedDate.setMinutes(timePartials[1]);
return formattedDate;
};
});
step 2 - create a controller function to get the date object
$scope.getDate = function() {
return $filter('dateToISO')('2012-10-12 00:00:00');
};
step 3 - call that function and get the date object to format in the HTML
<span class="year"> {{ getDate() | date:"yyyy" }} </span>
here is the working Demo Plunker
This may be a bit off and cheating but I think '2012-10-12 00:00:00'.split('-')[0] will do the trick