How to translate the md-datepickers "Invalid Date" message? - angularjs-material

like the topic says: in my project i have a md-datepicker, which in some cases (which are intended) shows "Invalid Date". Is there any possibility to translate or change this text?

Yes.
Actually, I'd got the same problem and "Invalid Date" should not be good at all. I thought it should be blank.
In my project, it happened when I enabled "md-open-on-focus" and I click on the input (not on icon or caret).
In addition, I was using Moment.js with the following configuration:
$mdDateLocaleProvider.formatDate = function (date)
{
return moment(date).format('DD/MM/YYYY');
};
As you can see, an invalid date like null or empty was formated and then returned.
Then, I've solved it by replacing it to this:
$mdDateLocaleProvider.formatDate = function (date)
{
var tempDate = moment(date);
return (tempDate.isValid() ? tempDate.format('DD/MM/YYYY') : '');
};

Related

How to check for a specific date in an array

I'm trying to do some error handling on an existing system. The backend can't be changed as it runs multiple systems. I'm working on moving the frontend from ASP.NET to React. I've come across a problem where I want to check if an array of objects contains a date, but the date retrieved from the backend comes as a /Date(1379282400000)/.
I've done some searches and can't find something that resembles this.
I tried this code:
if (data.some(e => new Date(parseInt(e.Date.substr(6))).toDateString() === this.state.date.toDateString()) {
// Logic
}
e.Date is the key used in the object for the dates and this.state.date is a date picked by the user. If I just do:
if (data.some(e => e.Date === "/Date(137982400000)/") {
// Logic
}
as a test, then it works fine. So, it seems to be the converting of the date to the string that breaks the function, but can't understand how to fix it.
It would be nice to fix that it checks the date as doing .getTime() will not work as it could be the same date, but different times.
So, found out that the problem came from trying to convert the DateTime from the backend inside the .some() function, but I was able to work it out.
First I create a new array containing only the date as that was what I needed to run a check against:
const dateConvertion = data.map(function(elem) {
return {
date: new Date(parseInt(elem.Date.substr(6))).toDateString()
};
});
Then I created the error handling:
if (dateConvertion.some(e => e.date === this.state.date) {
// Error Handling
}

Replace , with . in input field bound to property using Angular 1

I have an input field that is supposed to contain numbers.
It is bound to an object property.
I want input entered as 4,5 to automatically get converted to 4.5 in both model and view.
HTML:
<input data-ng-model="productContent(product.Id).Org" value="{{productContent(product.Id).Org | replaceComma}}" />
Control:
$scope.productContent = function (prodId) {
var content = $.grep($scope.productsContent, function (el) { return el.ProdId === prodId });
return content[0];}
Filter:
app.filter('replaceComma', function () {
return function (val) {
return (typeof val) == "string" ? val.toString().trim().replace(",", ".") : val
};
});
Result:
When I enter a number, at first the model (productContent) retrieves the correct object. Then the filter code is called and returns a correctly converted string. I would expect both the model and view to be updated to the filtered value, but both are updated with the unfiltered value. What am I doing wrong?
I have faced the same problem in the past but instead of creating my own filter, I took a different path and found something ready to use instead.
angular-input-masks by assisrafael one of my favourite angular extensions for this purpose:
https://github.com/assisrafael/angular-input-masks
Examples:
http://assisrafael.github.io/angular-input-masks/
Since the author has written the documentation, I don't want to get extensive on it and be outdated in the future. As a quick reference, look for ui-number-mask.
Maybe this is not a direct answer to your question, since it's not replacing commas with periods, but making you type the decimals instead.
On a side note, you can suppress the thousands separators with ui-hide-group-sep
I hope that's helpful, otherwise leave a comment and I'll be happy to continue to assist you!
-Helvio

Angular filter for date in HTML

I am trying to filter the date using angular filter in HTML. But it is not working.
Here is my template code:
{{due_date | date:'MM/dd/yy'}}
The input is: {"due_date" : "2015-10-10 16:00:00.000+0000"}
The expected output is: 10/10/15
What mistake am I doing?
It happens becouse due_date is a String instead of a Date object.
You can "convert" it by doing (maybe you should put this into your controller):
var due_date_parsed = new Date(due_date);
parse your date like :
$scope.date = Date.parse(new Date());
in you code
Date.parse(jobDetails.trs_data.due_date)
if string is also in proper date format like '20140313T00:00:00' then this code will work perfectly fine. In other case you will have to convert/parse the string to date type.

Getting error while populating date value using angularjs

I am getting error while populating date value in date field
I have the date input field,
<input type="date" data-ng-model="personalDetailsObj.personalDetails.dob" name="dob" value="{{personalDetailsObj.personalDetails.dob}}" pattern="dd/MM/YYYY"/>
I am getting the DOB value from server like this,
$scope.kycinfo = {
"title": "Mr",
"name": "vishnu",
"dob": "22-06-1980",
};
I am getting error When i try to set the value like this,
$scope.personalDetailsObj.personalDetails.dob = $scope.kycinfo.dob;
Error saying, Error: [ngModel:datefmt] Expected 22-06-1980 to be a date
If you are using moment.js (if not use it), then try this
$scope.personalDetailsObj.personalDetails.dob = moment($scope.kycinfo.dob);
otherwise using simple javascript (not recommended)
$scope.personalDetailsObj.personalDetails.dob = new Date($scope.kycinfo.dob);
Also no need of value attribute when you are already using ng-model

input type="date" not show value in chrome > 30

from my SQL Server i become a value of "03.11.2014". This value i want show in a input type of date like:
<input type="date" value={{myDate}}>
In the Internet Explorer this will show right, but without a date picker. Show like a textbox.
In Google Chrome i don´t became any value.
I have googled, but it looks like that Chrome expected the date in "2014-11-03".
What´s the right workarround to show a datetime picker with the right value in BOTH browsers?
You'll want to put quotes around "{{myDate}}" so {{myDate}} can be passed appropriately to the value attribute.
You'll want to create your own filter that will parse that string from being mm.dd.yyyy to yyyy-dd-mm. Depending on your datepicker, you then might need to then re-convert the string you just created to become a date again. If so, just add a line in the filter that does so.
Here's an example to start from for the filter:
angular.module('myApp', [])
.filter('reformatDate', function() {
return function(input) {
input = input.splice('.');
return input[2] + "-" + input[1] + "-" + input[0];
};
})
which you then call (after injecting the 'myApp' dependency in the controller):
value="{{myDate | reformatDate}}"

Resources