We Keep Coding

How do I convert datepicker returned date format to a different format?

Sorry about the bad title, I didn't exactly know how to phrase that any better. I'm going to try to explain what I need as best as possible.
I'm currently making a Task Manager (a ToDo list) in Javascript where you can create tasks, set a schedule for them and then you would have a list with all the tasks that you need to do and the respective schedule of each task (beginning and ending date).
I'm using Angular.js and Angular Material to do my UI. I have the Angular Material's datepicker. This is the code I use to get the date value:
angular.module('KBTM_App', ['ngMaterial']).controller('AppCtrl', function($scope) {
$scope.myDate1 = new Date();
...
// This is where I get the date value
var initial_date_1 = angular.element(document.querySelector('[ng-controller="AppCtrl"]')).scope().myDate1;
The problem is that this datepicker is returning the date in this format:"2016-04-29T08:36:10.027Z", which I don't want. I want a more normal format, like "DD-MM-YYYY".
I tried converting the date format with Moment.js, but that didn't work. Here's the code I used for that:
var initial_date = moment(initial_date_1, "YYYY-MM-DD'T'HH:MM:SS.SSS'Z'").format("DD-MM-YYYY");
And then I would store that date in the localStorage:
// Get the other dates already in the list
var initial_dates = get_initial_dates();
// Adds the new date to that list
initial_dates.push(initial_date);
// Stores those dates in the localStorage
localStorage.setItem('initial_date_db', JSON.stringify(initial_dates));
With that code I get "Invalid date" when trying to add a new task to the task list.
Sorry for the long post!
Thanks to whoever can help me.

You can convert the date format in html using angular material datepicker by using following code.
data-ng-value="myDate1 | date : 'shortDate'"

Use the angular date filter to format the date. Refer the link angular date
var initial_date = $filter('date')($scope.myDate1, "dd-MM-yyyy");
Inject the $filter in your controller main module.

Best way to handle dates is to use momentjs and there is a special AJS Directive available. angular-moment
You can check [momentjs][2] offical docs for detailed info. You have to add angular-moment as dependency injection to use moment easily. https://github.com/urish/angular-moment#instructions-for-using-moment-timezone-with-webpack

AngularJS/HTML input week format error

I'm using AngularJS to for user to choose week from a input week tag, but there is something bizarre qbout the format.
I've read that the format should be yyyy-W##, and I do this already, but angularJS still gives me this error:
Error: [ngModel:datefmt] Expected `2015-W51` to be a date
http://errors.angularjs.org/1.4.8/ngModel/datefmt?p0=2015-W51
and this is my tag:
<input type="week" ng-if="header.type==='week'" ng-model="entry[header.className]" ng-change="vos.fieldSelectionChanged(field_id,entry.record_id)"/>
So as you see, the input type is week, here, I'm using this tag inside of a ng-repeat, so I'm loading the data from the entry[] array, and the week loaded is 2015-W51.
So please tell me what I'm doing wrong , is there a best practice using this tag with AngularJS?
Thanks !
Edit 1 - more code
I've found this:
http://codepen.io/empirefox/pen/MYyoao
It demonstrates how to use input week with a date, but the problem is that I don't have the data as dates.
And at the right part of the page, you have this :
$scope.value = new Date(2013, 0, 3);
Change it to this :
$scope.value = "2015-W20";
And it gives me the same error. So if we can solve this one, I think we can also solve the problem on my page.

Angular uses native Date object to handle all its datetime-related inputs, but unfortunately Date instances does not have any methods to handle week numbers. It would be the best solution to stick with moment.js.
Coercion from string to ng-model-enabled value (in controller etc.):
$scope.value = moment("2015-W20").toDate();
Coercion from ng-model-enabled value to string (in form submit handler etc.):
moment($scope.value).format("YYYY-[W]WW"); // returns "2015-W20"

Time format returned from JSON in angular.js app

So I receive my app data via an API returning JSON data. With that, my time stamps are always returned with an undesirable look. Always like this:
2013-11-25T12:44:02
So I am using angular to build my app and couldn't see a way to format this with simply returning something like:
<div>
<p ng-repeat="date in ppt.Alerts | filter:{type: DenialStatement}"><span>{{date.date}}<span> <span>{{date.descr}}<span></p>
</div>
In this case, date is that time property. So I was figuring within my html, if I could benefit from using moment.js to format this or a better way to do this across the board.
Can anyone here assist with this?
Thanks much.

Your text is string representation of date object, you can assign
date.date = new Date(input)
during data retrieval this will work fine. And you can print directly angular built in date filter
<span>{{date.date|date :'dd/MM/yyyy'}}<span>
or any format you prefer.

Angular has built in date filter
{{date.date | date : format : timezone}}
See date filter docs for format and timezone usage

Angularjs - display current date and save it on a table

I got a view in angularjs and I'm just trying to display the current date.
html
<input type="text" class="form-control" ng-model="lis.ModifiedDate" id="ModifiedDate">
app.js
$scope.ModifiedDate = $filter("ModifiedDate")(Date.now(), 'yyyy-MM-dd');
Can you please assist me here i want to display default date and the save it on a table.

change the controller as,
$scope.ModifiedDate = $filter("date")(Date.now(), 'yyyy-MM-dd');
dont forget to inject $filter in to the controller
and html, you need to bind the value to textbox using ModifiedDate not with lis.ModifiedDate.
<input type="text" class="form-control" ng-model="ModifiedDate" id="ModifiedDate">
here is a sample Plunker

Ok. What you're asking for is how to format the data from the ng-bind and also edit it. What you need to do is little known and called a formatter:
How to do two-way filtering in angular.js?
You need to define functions that both read and write the formatted date. That is actually easy, but Date() parses date formats pretty well. You cannot just use filter to do this though.
Alternatively, if you're happy with a long-date format in the field you CAN edit that, and it will be updated as a normal bound value. Pretty delicate though - see plunkr:
http://plnkr.co/edit/MPfGoNsG74rAV6UuvBKk?p=preview
<body ng-controller="MainCtrl">
<p>Edit the date in the input:</p>
<input ng-model="boundDate">
{{boundDate | date : 'yyyy-mm-dd'}}
</body>
app.controller('MainCtrl', function($scope, $filter) {
$scope.boundDate = new Date();
});

Use moment js it can convert date as required format
$scope.formattedDate = moment(new Date()).format("YYYY-MM-DD");
In html you use directly {{formattedDate}} it displays date in yyyy-mm-dd format

Autofilling Form Date and Time in Chrome with Javascript

I'm trying to populate a form on a site with values passed through GET. The two fields I'm having trouble with are input tags that are of type type="date" or type="time". Chrome has this nice feature that gives you a drop down calendar to select a date:
Chrome also does something similar for the Time field. The problem is that it doesn't like javascript that tries to populate those types of form fields. I pass GET information like so:
The reason the date is formatted like this is because that's what the back-end requires (not what I'm working on) and the date comes directly from the back end code.
I have a function that auto-populates document.$_GET as an array with all passed values from GET. I also have date.js included, which allows me to use the Date.parse functionality and some other stuff. I pass it through javascript like this:
if(document.$_GET['time']!=undefined)
document.getElementById('time').value=document.$_GET['time'];
if(document.$_GET['date']!=undefined){
var date = new Date();
date = Date.parse(document.$_GET['date']);
alert(date.toString('MM-dd-yyyy')); // <-- Debugging
document.getElementById('date').value = date.toString('MM-dd-yyyy'); //WHY WON'T YOU WORK!?
}
On Safari I get what I expect to get:
With Chrome I'm left with empty form fields:
I'm stumped and not sure how to remedy this. I need Chrome to autofill similar to how Safari does.

Google Chrome is strict about the format of the Date.
The date works with the following format, YYYY-MM-DD.
The time works with military time. (24h clock)
Here's a sample,
http://jsfiddle.net/vFnxw/2/
$("#date").attr({
value:"2012-09-28"
})
$("#time").attr({
value:"23:59:59"
})
Here are the sources
http://dev.w3.org/html5/markup/input.date.html
http://dev.w3.org/html5/markup/input.time.html