Display Moment.js in different locale - javascript

Using Moment.js, I can't determine the way to show a date in a defined locale (eg. Fr). Any help is appreciated.
<script>
var NowMoment = moment().format("dddd, MMMM Do");
// display value of moment object in #displayMoment div
var eDisplayMoment = document.getElementById('displayMoment');
eDisplayMoment.innerHTML = NowMoment;
</script>

Add moment+locales.js or the locale/fr.js that you need...
moment.locale('fr');
var NowMoment = moment().format("dddd, MMMM Do");
// display value of moment object in #displayMoment div
var eDisplayMoment = document.getElementById('displayMoment');
eDisplayMoment.innerHTML = NowMoment;
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
<div id="displayMoment"></div>

I believe you do:
<script>
var NowMoment = moment();
NowMoment.tz('Europe/Paris').format("dddd, MMMM Do");
// display value of moment object in #displayMoment div
var eDisplayMoment = document.getElementById('displayMoment');
eDisplayMoment.innerHTML = NowMoment;
</script>
I am not 100% sure it works as I am not able to test it. I got it from http://momentjs.com/timezone/

Related

Display current year using external javascript

I'm having trouble updating the current year using js from an external file. The year in the html doesn't update to display the current year. Here's my html code;
<p>
Copyright © <span id="year">year</span>. All rights reseverved.
</p>
<script src="./js/shared.js"></script>
And here's my js code;
const year = document.querySelector('#year');
function date() {
year.innerHTML = new Date()
};
What am I doing wrong here, and what's the right way to achieve my goal?
Just try to add function invocation:
document.addEventListener('DOMContentLoaded', function(){
const year = document.querySelector('#year');
function date() {
year.innerHTML = new Date().getFullYear();
};
date();
}

JS HTML Time value.getHours() is showing NaN

I am learning JS and as part of this I was trying to build a HTML page where based on date and time input of EST, I will get IST date and hour in the label. However, I am struggling to get hours and minutes out from HTML input so that I can set these hours into selected. If any of you experts can help me out here, will be really appreciated.
<HTML>
<HEAD>
<script language="JavaScript">
function calcTime() {
var output = document.getElementById("result");
var selectedDate = document.getElementById('date').value;
var selectedTime = document.getElementById('time');
selectedDate.setHours(selectedTime.getHours());
selectedDate.setMinutes(selectedTime.getMinutes());
var traceHours = new Time(selectedTime);
var markHours = traceHours.getHours();
nd = new Date(selectedTime + (3600000 * 9.5));
output.innerHTML = updatedDate;
}
</script>
</HEAD>
<BODY>
Select a date:
<input id=date type="date">
<input id=time type="time">
</br>
<button id=submit onclick="calcTime();return false;">Click to check Time</button>
Time to EST is:
<B>
<blink>
<DIV style="background-color: rgb(25, 236, 208)" id=result></DIV>
</blink>
</B>
</BODY>
</HTML>
You have to get the .value of the input elements, which are text, create a new Date from their values and then you can call a Date method on that.
You also have several other HTML and JavaScript problems, for example, there is no such thing as a Time object in JavaScript, so this will fail:
var traceHours = new Time(selectedTime);
Frankly, it's clear that you've gotten this code straight out of 1995 (seriously). There are a lot of things that are no longer correct (i.e. blink has been deprecated for many years [thank God!]).
See the HTML and JavaScript comments below for details.
<HTML>
<HEAD>
<style>
/* Don't do styling in HTML, separate it into CSS */
#result { font-weight:bold; background-color: rgb(25, 236, 208); }
</style>
</HEAD>
<BODY>
Select a date:
<input id=date type="date">
<input id=time type="time"><br> <!-- There's no such thing as </br> -->
<button id="submit">Click to check Time</button>
<!-- Don't use inline event attributes like onClick. Do that work in JavaScript.
Also, don't use an HTML tag because of the formatting the browser applies to
it, like <b>. Styling is done with CSS, not HTML. -->
Time to EST is: <DIV id="result"></DIV>
<!-- Place your <script> element just before the closing BODY tag
so that by the time the parser gets here, all the HTML will have
been read into memory. Also, type=javascript isn't necessary since
that is the default type. -->
<script>
// Get your DOM references just once, not every time the function runs
var output = document.getElementById("result");
var dateElement = document.getElementById('date')
var timeElement = document.getElementById('time');
// Set up events in JavaScript, not with inline HTML event attributes
document.getElementById("submit").addEventListener("click", calcTime);
function calcTime() {
// Create a new Date object from the two HTML inputs
var est = new Date(dateElement.value + " " + timeElement.value);
// Write out the results. Don't use .innerHTML when there is no HTML.
// Use .textContent instead and just call .toISOString() to get UTC time.
result.textContent = 'USA time: '+ est.toISOString();
}
</script>
</BODY>
</HTML>
There's a couple things going on here:
You need to call value after document.getElementById('time'), otherwise you're working with the element
Both selectedDate and selectedTime are just string values, so you won't be able to call DateTime methods like getHours on either of them
To address the above, simply create a new instance of Date using selectedDate and selectedTime like this: var date = new Date(selectedDate + ': ' + selectedTime); This works because the Date constructor can accept any parseable date string (cf, this should be ok for your purposes, but be aware that this won't work on all browsers, so be careful)
You can now display the stringified date on your page
Full code example:
var output = document.getElementById('result');
var selectedDate = document.getElementById('date').value;
var selectedTime = document.getElementById('time').value;
var date = new Date(selectedDate + ': ' + selectedTime);
output.innerHTML = date;
A couple extra things, you'll probably want to add quotes around your id= tags in the HTML; the </br> should be <br /> or just <b>; probably want to stick with lowercase for all your HTML tags; the <blink> tag is considered obsolete and has been deprecated, so you shouldn't use it; setting innerHTML on an element will completely replace the child nodes, so your string "Time to EST is:" will be entirely replaced by the string value for your date object.
Hope this all helps.
Look at answer from #jcjcjcjc.
Furthermore if you really want to access hours and minutes or set the time you can do
var selectedTime = document.getElementById('time').value;
hours = selectedTime.split(":")[0];
minutes = selectedTime.split(":")[1];
document.getElementById('time').value = "13:45:00.000";
you can use getHours() on object Date only
function calcTime() {
var date = document.getElementById("date").value,
time = document.getElementById("time").value;
var dateTime = date +" " + time;
nd = new Date(dateTime);
}
This is a great community, I really appreciate all of you taking time to resolve my problem. Scott Marcus, jcjcjc, 45ccccw32, Leung King Tim and everyone. I was able to resolve my issue by the code provided by Scott. Please find below the final code for anyone looking for this in future.
var output = document.getElementById("result");
var dateElement = document.getElementById('date')
var timeElement = document.getElementById('time');
document.getElementById("submit").addEventListener("click", calcTime);
function calcTime() {
// Create a new Date object from the two HTML inputs
var est = new Date(dateElement.value + " " + (timeElement.value));
if(est.getMinutes>=30){
est.setMinutes(est.getMinutes() + 30);
est.setHours(est.getHours + 1);
}
else{
est.setMinutes(est.getMinutes() + 30);
}
if(est.getHours>=24){
est.setHours(est.getHours() + 9);
est.setDate(est.getDate() + 1);
}
else{
est.setHours(est.getHours() + 9);
}
result.textContent = 'India time: '+ est.toLocaleString();
}
#result { font-weight:bold; background-color: rgb(25, 236, 208); }
<HTML>
<HEAD>
</HEAD>
<BODY>
Select a date:
<input id=date type="date">
<input id=time type="time"><br>
<button id="submit">Click to check Time</button>
Time to EST is: <DIV id="result"></DIV>
</BODY>
</HTML>

use JavaScript to make a webpage that forwards to a URL which includes the date?

I wanted to make a bookmark that uses today's date in the URL; in other words, when the bookmark is launched, the end of the URL would vary each day. So today's would end in .../2017/1/31 and tomorrow's would end in .../2017/2/1.
I thought it might be easiest to just make a barebones HTML page that includes an inline JavaScript to get current year, month, and date and append it to the main URL (which never changes). Does this make sense? Is there an easier way to accomplish this?
I'm okay with HTML elements, but kind of clueless about JavaScript; I literally copied a snippet from another stackoverflow answer that sounded decent and put it into my head tags as you can see below, and tried to adapt my URL into the ahref link:
<HTML>
<head>
<script>var d=new Date();</script>
</head>
<body>
<a href="http://wol.org?t="+d.getTime()>Continue</a>
</body>
</HTML>
The following will run without need for clicking any buttons:
<HTML>
<head>
<script>
Date.prototype.yyyymmdd = function() { //returns YYYY/MM/DD
var mm = this.getMonth() + 1; // getMonth() is zero-based
var dd = this.getDate();
return [this.getFullYear(),
(mm>9 ? '' : '0') + mm,
(dd>9 ? '' : '0') + dd
].join('/');
};
var date = new Date();
window.location.href = "your.url.com/" + date.yyyymmdd();
</script>
</head>
<body>
</body>
</HTML>
Date function from this answer: https://stackoverflow.com/a/3067896/3803371
Note I usually don't condone modification of native prototypes, but I'm feeling lazy today.
You cannot use javascript expression outside script tag. So you cannot call d.getTime like this. Instead of you can do this:
<a id="c" href="">Continue</a>
<script>
(function() { // wait for window load
var d=new Date();
var a = document.getElementById("c");
a.href = "http://wol.org?t="+d.getTime();
})();
</script>
There's a couple problems with your code. First, you're mixing HTML and JavaScript. JavaScript can only go between the <script> tags. Also, the script needs to go below your link you want to modify.
If you want to get the date in the form year/month/day you'll have to do some modification to the date string you get back from your Date object. What I do below is basically get the date string and split it by / into an array. I know the first index is the month, second is the day, and third gives me the year. I store each of those into a variable to use and rearrange later.
I then had to locate the <a> element using getElementById() and then I changed the href value using my date variables.
var dateString = new Date().toLocaleDateString();
var dateArray = dateString.split('/');
var month = dateArray[0];
var day = dateArray[1];
var year = dateArray[2];
var dateOrder = year + "/" + month + "/" + day;
console.log(dateOrder);
var a = document.getElementById('link');
a.href += dateOrder;
<a id="link" href="http://wol.org?t=">Continue</a>
<script>
// Javascript from above goes here
</script>

Angular JS date format to longdatestring

I am trying to convert date from my angular code
"/Date(1481843459627)/" to any understandable date format.
I tried this link but i was successful only if input was a time stamp.
Any suggestions ?
Something like this:
{{1481843459627 | date:'medium'}}
Easy and sleek.
In JavaScript you can simply use:
var dateNew = new Date(1481843459627);
You can format date by creating a filter which will convert that date to your formatted output.
var app = angular.module('app',[]);
app.filter('ctime', function($filter){
return function(jsonDate){
var date = new Date(parseInt(jsonDate.substr(6)));
var filterDate = $filter('date')(date, "MMMM d, y");
return filterDate ;
};
});
app.controller('fCtrl', function($scope){
$scope.date = '/Date(1481843459627)/';
});
Then you can do in html like this
<p ng-bind="date | ctime"></p>
You could directly use the format in view page or filter in the controller. https://docs.angularjs.org/api/ng/filter/date
<div ng-app="app">
<div ng-controller="homeCtrl">
{{date | date :'dd/MMM/yyyy'}}
</div>
</div>
Parse the date into the required date format. Because the mentioned value isn't the valid date format. So to convert the date first need to convert into the correct format. like as 1481843459627 and need to remove the remaining string.
var val ="/Date(1481843459627)/";
var date = new Date(parseInt(val.substr(6)));
Use simple angular date filtes for this purpose.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date }}</p>
<p>{{today | date:'dd-MM-yyyy'}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function ($scope) {
$scope.today = 1481843459627; //Your date parameter
});
</script>
<p>The date filter formats a date object to a readable format.</p>
</body>
</html>
Find more about angular date filters here

Showing wrong date conversion in angular v1.1

I was having time="2015-06-26T18:50:07.000Z" as I am using angularv1.1 ,I can not use UTC and I dont have milliseconds as well,
What I have is only this time string
In HTML
<div ng-app='myapp' ng-controller="myctrl">
{{date | date:"MM/dd/yyyy" }}
</div>
In Controller
var x="2015-06-26T18:50:07.000Z"
var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope){
$scope.date=x;
});
Where I want output as 06/26/2015 and it is showing 06/27/2015 may be problem of GMT or UTC whatever .
Please suggest me ,What can I do to show 06/26/2015
Fiddle:http://jsfiddle.net/obv10wd9/2/
Please check this one.
You can do like this.
var x="2015-06-26T18:50:07.000Z"
var app=angular.module('myapp',[]);
app.controller('myctrl',function($scope){
var date=new Date(x);
$scope.date = new Date(date.getTime() +(date.getTimezoneOffset()*60000));
console.log(typeof $scope.date)
});
Here is the updated Fiddle

Categories

Resources