datetime format in angularjs - javascript

In AngularJs I get a date in this format : ["2018-01-03T09:30:54.264Z"].
I want it to be in the format : "2018-01-03T09:30:00"
How can I get it in this format?
Controller.js
var myDate = new Date();
$scope.form.date.push(myDate);
template
<div class="col-lg-12 photo-container" ng-repeat="photo in selectedPhotos track by $index" ng-if="add">
<input id="myDate" type="datetime-local" name="date[]" ng-model="form.date[$index]">
<img ng-src="{{photo}}" class="thumb">
</div>

You are not being clear about how you are doing it, but here is a working example (work from it):
var app = angular.module('myApp', []);
app.controller('dateCtrl', function($scope) {
$scope.form = {
"date": []
};
for (let i = 0; i < 5; i++) {
var myDate = new Date();
$scope.form.date.push(myDate);
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="dateCtrl">
<div ng-repeat="date_ in form.date track by $index">
<div>1: {{ date_ | date : 'yyyy-MM-ddThh-mm-ss' }}</div>
<div>2: {{ form.date[$index] | date : 'yyyy-MM-ddThh-mm-ss' }}</div>
<br/>
</div>
</div>
</body>
</html>

you can use moment.js to achieve that i.e.
var d = moment("2018-01-03T09:30:54.264Z").format('YYYY-MM-DDThh:mm:ss') .
it will give you the required format, put whatever format you want as string in format() function.

first inject $filter to your controller then try this:
var myDate = new Date();
myDate = $filter('date')(myDate , "YYYY-MM-DDThh:mm");
$scope.form.date.push(myDate);

Related

Get IMDB info using JavaScript

I am trying to get IMDB info using JavaScript. The following code is working for Title, Year, IMDB link but when I am trying to get "Runtime", "Director", "Released" etc I am getting as undefined. Please help!
This is the data formate: https://www.omdbapi.com/?i=tt4779682&apikey=ba1f4581
Code:
var data;
function getanswer(q){
$.get("https://www.omdbapi.com/?s="+q+"&apikey=ba1f4581", function(rawdata){
var rawstring =JSON.stringify(rawdata);
data =JSON.parse(rawstring);
var title = data.Search[0].Title;
var year = data.Search[0].Year;
var director = data.Search[0].Director;
var imdburl="https://www.imdb.com/title/"+data.Search[0].imdbID+"/";
var posterurl =data.Search[0].Poster;
document.getElementById('answer').innerHTML="<h1>"+title+"</h1><br> <img src= '"+posterurl+"'><br><p> Year Released:"+year+"</p> <br><p> Year Released:"+director+"</p> <br> <p> IMDB page: <a href='"+imdburl+"'target='_blank'>"+imdburl+"</a></p>"; }); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<html>
<head></head>
<body onload="getanswer(document.getElementById('querybox').value)">
<!doctype html> <input value="The Meg" onkeyup="getanswer(document.getElementById('querybox').value)" id="querybox"> <div id="answer"></div>
</body>
</html>
According to the api documentation, you were using s parameter that would not return Runtime/Director/etc. You could use the t parameter and remove Search[0].
Below is the code that would work:
var data;
function getanswer(q){
$.get("https://www.omdbapi.com/?t="+q+"&apikey=ba1f4581", function(rawdata){
var rawstring =JSON.stringify(rawdata);
data =JSON.parse(rawstring);
console.log(data);
var title = data.Title;
var year = data.Year;
var director = data.Director;
var imdburl="https://www.imdb.com/title/"+data.imdbID+"/";
var posterurl =data.Poster;
document.getElementById('answer').innerHTML="<h1>"+title+"</h1><br> <img src= '"+posterurl+"'><br><p> Year Released:"+year+"</p> <br><p> Year Released:"+director+"</p> <br> <p> IMDB page: <a href='"+imdburl+"'target='_blank'>"+imdburl+"</a></p>"; }); }

Display date is an md-datepicker field

Dates are coming from API for me. I need to display the date in a md-datepicker field. I'm getting date but it is not displaying in a datepicker.
Date is not fetching in a datepicker. Can anyone please tell how to display in a datepicker field.
var app = angular
.module('app', ['ngMaterial', 'md-steppers']);
app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$scope.dateBirth = new Date(2014, 3, 19);
var a = new Date($scope.dateBirth)
var day = a.getDate();
var month = a.getMonth() + 1;
var year = a.getFullYear();
$scope.anniversaryd = month + "/"+day+"/"+year;
alert($scope.anniversaryd);
}]);
h1 {
text-align: center;
}
<div ng-app="app" ng-controller="mainCtrl as vm">
<h2>
Selected Date: {{(anniversaryd | date) || 'null'}}
</h2>
</h2>
<md-datepicker
ng-model="anniversaryd"
md-date-filter="vm.isAvailable"
></md-datepicker>
</div>
You need to pass Date instance instead of string to md-datepicker.
var app = angular.module('app', ['ngMaterial']);
app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$scope.dateBirth = new Date(2014, 3, 19);
$scope.anniversaryd = $scope.dateBirth;
console.log($scope.dateBirth);
}]);
h1 {text-align: center;}
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl as vm">
<h2>
Selected Date: {{(anniversaryd | date) || null}}
</h2>
</h2>
<md-datepicker
ng-model="anniversaryd"
md-date-filter="vm.isAvailable"
></md-datepicker>
</div>

How to create dynamic datetimepicker value?

My HTML code like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Demo like this : https://jsfiddle.net/oscar11/8jpmkcr5/83/
If I click submit button, I successfully get the datetime value 300 minutes from now
But if before submitting, I wait 10 minutes, the result does not match my expectations
For example now at 6 o'clock. Before submit I wait 10 minutes. After submit, the time value I get is 11.10. So I want to like it
How can I do that?
How do I make the automatic datetime value increase?
Update :
Whether the time value in textfield can be automatically increased based on current time?
Not sure why would you need it, but you can use something like:
$("#btnSubmit").click(function() {
var targetDate = new Date(new Date().getTime() + (300 * 60 * 1000));
$('#datetimepicker').data("DateTimePicker").date(targetDate);
value = document.getElementById('datetimepicker').value;
console.log(targetDate, value);
});
On click, it will change the datetimepicker to the current date + 300 minutes.
I've updated the example: https://jsfiddle.net/8jpmkcr5/86/
EDIT:
Based on your latest comment, i believe you want the use to be able to pick the date (day/month/year) but the time (hour/minutes) keep changing as time passes to current time + 3 hours. If thats the case you can use something like:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
setInterval(function(){
var pickedDate = $('#datetimepicker').data('DateTimePicker').date();
var currentDate = moment();
pickedDate = pickedDate.set({
'hour' : currentDate.get('hour') + 3,
'minute' : currentDate.get('minute'),
'second' : currentDate.get('second')
});
$('#datetimepicker').data("DateTimePicker").date(pickedDate);
},1000);
You can test here: https://jsfiddle.net/8jpmkcr5/98/
You can update it every click and/or every minute
function updateTime(){
$('#datetimepicker').data("DateTimePicker").date(moment().startOf('minute').add(180, 'm'));
};
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(180, 'm'),
});
});
$("#btnSubmit").click(function() {
updateTime();
value = document.getElementById('datetimepicker').value;
console.log(value)
});
setInterval(function(){
updateTime();
},60000);
check
https://jsfiddle.net/8jpmkcr5/88/
Anyway the idea of the picker is to let user choose, what's the point using it and forcing some date?
You can try a different approach and add the 300 minutes on submit like this:
$(function () {
$('#datetimepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
var d1 = new Date (),
d2 = new Date ( value );
d2.setMinutes ( d1.getMinutes() + 300 );
console.log(moment(d2).format("YYYY-MM-DD HH:mm:ss"));
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datetimepicker' />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
var date = convertUTCDateToLocalDate(new Date(startdate));
date = moment(date, 'DD/MM/YYYY HH:mm').format("DD/MM/YYYY HH:mm");
date = date.toLocaleString();
$('#datetimepicker7').data("DateTimePicker").date(date);
//Covert date to universal date
function convertUTCDateToLocalDate(date) {
var newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
var offset = date.getTimezoneOffset() / 60;
var hours = date.getHours();
newDate.setHours(hours - offset);
return newDate;
}

How to get time with Milliseconds in AngularJS

I'm able to get seconds in Time using AngularJS and its "Interval" option but i was thing about adding milliseconds to the same with 2 digits. Below is the code. can anyone tell me on how to add milliseconds to it.
AngularJs Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;"><b>{{theTime}}</b></h3>
</div>
Update - On how i found the solution.
I just did the following changes. Thanks to Pranjal
AngularJS Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date();
$interval(function () {
$scope.theTime = new Date();
}, 1);
});
HTML
<div class="col-lg-2" ng-app="myApp" ng-controller="myCtrl">
<h3 style="color: blue;font-family: cursive;font-size: 20;margin-left: 20;"><b>{{theTime | date:'HH:mm:ss:sss a'}}</b></h3>
</div>
<body>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.CurrentDate = new Date();
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<span>{{CurrentDate | date:'HH:mm:ss:sss'}}</span>
</div>
</body>

DateTime not working in angular.js

I've got this line of code
<h3> <script>Date.now</script>{{$flow.files[0].name}} </h3>
Basically All i'm wanting to do is put the date infront of the filename thats generated from the {{}}.
It currently shows nothing, The unix timestamp might be better but i can only get it to show text that i type infront.
I have tried {{Date.now(); $flow.files[0].name}} Which hasn't worked.
If you want to do it with JavaScript like your first attempt, you should have something like this:
<div ng-app="app">
<span id="dateHere"></span> - {{fileName}}
<script>
document.getElementById("dateHere").innerHTML = Date();
</script>
</div>
and if you want to have more control on your date format:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<div ng-app='app' ng-controller='Ctrl'>
<span id="dateHere"></span> - {{fileName}}
<script>
document.getElementById("dateHere").innerHTML = Date();
var date = new Date();
var currentYear = date.getFullYear();
var currentMonth = date.getMonth();
var currentDate = date.getDate();
var customDate = currentMonth + '-' + currentDate + '-' + currentYear;
document.getElementById("dateHere").innerHTML = customDate;
</script>
</div>
<script>
angular.module('app', []).controller('Ctrl', function($scope){
$scope.fileName = 'your file name';
})
</script>
-> on Plunker
Try something like this:
Controller:
$scope.myDate = new Date();
HTML:
{{myDate | date: 'MMM d, y h:mm:ss a' }} {{$flow.files[0].name}}
I used the filter date to format the date.

Categories

Resources