How to use JQuery and moment.js to automatically change date locale? - javascript

I want to change a fixed timestamp in English to German automatically with moment.js.
The timestamp looks like the following:
<time class="entry-timeago timestamp" datetime="2016-09-06">a month ago</time>
For this I have added the following code:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/locale/de.js"></script>
<script type="text/javascript">
var language = window.navigator.userLanguage || window.navigator.language;
moment.locale(language);
$('.timestamp').each(function (i, date) {
var $date = $(date);
$date.html(
moment($date.attr('datetime'))
.format('ll')
);
});
</script>
With this code I still cannot see a difference (even if I set moment.locale('de'); manually) and I wonder why.
Thanks for help.

Related

How to display a.m instead of AM using date-and-time library?

Given a string like
const time = "06:15:00"
This is 6:15 am
date.format(time, "h:mm A") // 6:15 AM
I want 6:15 a.m.
date.format(time, "h:mm aa")
doesn't work for some reason
Is there a way?
You have to add meridiem plugin
date.plugin('meridiem')
const time = date.parse('06:15:00', 'hh:mm:ss')
console.log(date.format(time, 'hh:mm aa'))
<script src="https://rawcdn.githack.com/knowledgecode/date-and-time/a5f31dcb3fe1bd02fd8ff7770552c73a4401d0a1/date-and-time.min.js" type="text/javascript"></script>
<script src="https://rawcdn.githack.com/knowledgecode/date-and-time/a5f31dcb3fe1bd02fd8ff7770552c73a4401d0a1/plugin/meridiem.js" type="text/javascript"></script>

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>

How to get TimeZone wise local time using moment.js

i am working with two js library to get browser timezone id and browser local time
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstimezonedetect/1.0.4/jstz.min.js"></script>
<script src="Scripts/moment-timezone.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
alert(moment.tz(tz.name()).format());
});
</script>
this below code return perfect timezone id
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
but this code is not working alert(moment.tz(tz.name()).format()); not giving user local time.
am i missing something in code? do i need to add any momentjs related other file ?
please guide me. i want to get user local time using moment.js. thanks
UPDATE Working Version
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jstz.min.js"></script>
<script src="Scripts/moment.min.js" type="text/javascript"></script>
<script src="Scripts/moment-timezone-with-data-2010-2020.min.js" type="text/javascript"></script>
</head>
<body>
<form method="post" action="WebForm1.aspx" id="form1">
<div>
<script type="text/javascript">
$(document).ready(function () {
var tz = jstz.determine(); // Determines the time zone of the browser client
alert(tz.name());
var format = 'YYYY/MM/DD HH:mm:ss ZZ';
alert(moment.tz('Europe/London').format(format));
alert(moment.tz(tz.name()).format(format));
});
</script>
</div>
</form>
</body>
</html>
My solution of this case (this is part of the page code):
function toLocalTime(time) {
if (time <= 0)
return '';
var m = moment.tz(time, 'America/Chicago'); //CDT
var tz = jstz.determine(); // Determines the time zone of the browser client
m.tz(tz.name()); // Convert CDT to local time
return m.format('HH:mm:ss');
}
<script src="js/jstz.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/moment-timezone-with-data-2010-2020.js"></script>
...........
<script th:inline="javascript">document.write(toLocalTime(<<TIME IN MILLISECONDS HERE>>));</script>

Need datepicker which shows date in other format

I want a date picker which gives the date in this format
January 19, 2012
I already have some date pickers but they are showing dates like this:
12/10/2013
Lots of formats here
You can even customise them. Hope it helps!
Try this Demo
Script
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker({
dateFormat: 'MM dd,yy', onSelect: function (datetext) {
$('#datepicker').val(datetext);
},
});
});
</script>
HTML
<input type="text" id="datepicker"/>
Try this.
set this to ur date picker.
datePicker.timeZone = [NSTimeZone localTimeZone];
self.datePicker.datePickerMode = UIDatePickerModeDate;

eclipse jsp formatter - inserts linebreaks in <script>

I recently upgraded to eclipse indigo from galileo. There has been some changes in the default formatter in my jsp pages.
<script type="text/javascript">
var DAY = '<%=Constants.SALES_DAY%>';
var WEEK = '<%=Constants.SALES_WEEK%>';
var MONTH = '<%=Constants.SALES_MONTH%>';
var YEAR = '<%=Constants.SALES_YEAR%>';
</script>
Ctrl-Shift-F on the file produces:
<script type="text/javascript">
var DAY = '<%=Constants.SALES_DAY%>';
var WEEK = '<%=Constants.SALES_WEEK%>';
var MONTH = '<%=Constants.SALES_MONTH%>';
var YEAR = '<%=Constants.SALES_YEAR%>
';
</script>
which breaks the page when deployed. Where and how can I modify the setting responsible for this behavior?
found this post which helped and got info here.
http://www.eclipse.org/forums/index.php/m/769392/#msg_769392
looks like an eclipse bug.

Categories

Resources