Working on a weather app that includes a 5 day forecast and I would like the dates displayed. I cant figure out how to format it to just month, date and year (ex: July 23rd 2020) which should be 'll'. It's still showing as "Jul 23 2020 Fri Jul 24 2020 19:54:06 GMT-0700 (Pacific Daylight Time) Day" instead of formatting properly.
Here is my HTML:
<div class="row">
<div class="col" id = "one" ></div>
<div class="col" id = "two" > Day Two</div>
<div class="col" id = "three" > Day Three</div>
<div class="col" id = "four" > Day Four</div>
<div class="col" id = "five" > Day Five</div>
</div>
And here is my javascript:
const tomorrow = new Date()
tomorrow.setDate(new Date(ll).getDate() + 1);
var one = document.getElementById('one');
one.innerHTML = tomorrow;
Assuming the format you needed is always like you mentioned
function format(date){
var months=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var suffices={_0:'th',_1:'st',_2:'nd',_3:'rd',_4:'th',_5:'th',_6:'th',_7:'th',_8:'th',_9:'th',_11:'th',_12:'th',_13:'th'};
return months[date.getMonth()]+' '+date.getDate()+(suffices['_'+date.getDate()] || suffices['_'+date.getDate()%10])+' '+date.getFullYear();
}
Usage
format(new Date())//returns "Jul 24th 2020"
format(new Date(2020,11,13))//returns "Dec 13th 2020"
if you are simply wanting the left side of the date, all you have to do is parse the date string. Something like this:
var mydate = new Date().toString().split(' ');
var formattedDate = b = a[1] + " " + a[2] + " " + a[3];
if you're insistent on the "rd" after your number, that will require a lookup table like in some other answers. This code splits the string into an array of strings by space then combines the 2nd, 3rd, and 4th elements into a new string.
Related
I am using Vue to render some data, the problem is the date stored in the field created_at is in UTC (I need it to be in EST).
<div class="row">
<div class="col-md-3" v-for="result in results">
<div class="panel panel-default">
<div class="panel-heading">
<p>createdAt:{{ result._source.created_at }}
</div>
<div class="panel-body">
<p>text:{{ result._source.text }}</p>
</div>
</div>
</div>
</div>
I tried using this javascript variable to convert it but I'm not sure how to implement it.
<script>
var usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"});
console.log('USA time: '+ (new Date(usaTime)).toISOString())
</script>
Do I need to pass the value of created_at into a javascript function that will convert the date? Or could I just subtract eight hours from the date and then return it?
If you have a Date object which is in UTC, you can use your code to display it in a locale and timezone much as you did in your code.
Live demo:
var utcTime = new Date("2020-10-16T18:00:00Z");
console.log('UTC Time: ' + utcTime.toISOString());
var usaTime = utcTime.toLocaleString("en-US", {timeZone: "America/New_York"});
console.log('USA time: '+ usaTime)
So
Do I need to pass the value of created_at into a javascript function that will convert the date?
Yes, assuming your result._source.created_at value is formatted as a UTC date, you would pass it in and call toLocaleString to display it appropriately.
Perhaps something like:
<div class="panel-heading">
<p>createdAt:{{ new Date(result._source.created_at).toLocateString("en-US", {timeZone: "America/New_York") }}</p>
</div>
I have some blog posts where I want to display the date which the post was published. For that I want to use momentjs. So the HTML looks like this
<span class="published_date" data-publish-date="2019-06-20"></span>
<span class="published_date" data-publish-date="2019-07-01"></span>
<span class="published_date" data-publish-date="2019-08-23"></span>
My JS looks like this:
$(".published_date").each(function() {
let publishDate = $(this).attr("data-publish-date");
let formattedDate = moment(publishDate, "d. MMMM YYYY").format(
"d. MMMM YYYY"
);
$(this).text(formattedDate);
});
This returns wrong dates
4. June 2019
1. July 2019
5. August 2019
I have no clue why this happens so can someone help me out?
Since your input is in ISO 8601 recognized format you can use moment(String) and in format() use uppercase D is Day of Month instead of lowercase d that stands for Day of Week
Here a live sample:
$(".published_date").each(function() {
let publishDate = $(this).attr("data-publish-date");
let formattedDate = moment(publishDate).format(
"D. MMMM YYYY"
);
$(this).text(formattedDate);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<span class="published_date" data-publish-date="2019-06-20"></span>
<span class="published_date" data-publish-date="2019-07-01"></span>
<span class="published_date" data-publish-date="2019-08-23"></span>
Two problems:
You've explicitly given it a format to parse with ("d. MMMM YYYY"), but that format doesn't remotely match the data you're providing it ("2019-06-20", etc.).
You're using d, not D, when formatting. Per the documentation, d is the day of the week, not the day of the month.
If you make the formats correct, it should work:
let formattedDate = moment(publishDate, "YYYY-MM-DD").format(
"D. MMMM YYYY"
);
Live Example:
$(".published_date").each(function() {
let publishDate = $(this).attr("data-publish-date");
let formattedDate = moment(publishDate, "YYYY-MM-DD").format(
"D. MMMM YYYY"
);
$(this).text(formattedDate);
});
<span class="published_date" data-publish-date="2019-06-20"></span>
<span class="published_date" data-publish-date="2019-07-01"></span>
<span class="published_date" data-publish-date="2019-08-23"></span>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
I have the following input
<input type="date" ng-model="startDateInput" ng-change="dateConvert()" />
And I set a default value since I call a service on the load of the page and need to pass the date as a parameter
$scope.startDateInput = new Date(new Date().setFullYear(new Date().getFullYear() - 1));
console.log("$scope.startDateInput" + $scope.startDateInput)
But later on I want this value to be updated when the user touches the date input and selects a new date on the calendar that pops up.
The thing is, my value is not changed here.
stays the same as the default value.
$scope.dateConvert = function() {
var dateFrom = $scope.startDateInput;
$scope.params.startDate = dateFrom;
console.log("dateFrom " + dateFrom);
console.log(" $scope.params.startDate " + $scope.params.startDate);
}
the results of the log
dateFrom Wed Sep 13 2017 11:22:26 GMT+0100 (Western European Summer Time)
tab.accountStatement.controller.js:261 $scope.params.startDate Wed Sep 13 2017 11:22:26 GMT+0100 (Western European Summer Time)
It keeps the default value I assigned before, but why? How can I change this value?
angular.module('MyApp', [])
.controller('MyCtrl', function($scope,$filter){
$scope.default_date =$filter("date")(Date.now(), 'yyyy-MM-dd');
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl">
<input type="date" ng-model="default_date" value="{{default_date}}">
<p>{{default_date}}</p>
</div>
</div>
I have a series of divs with unique dates that include the start of the week and end of the week associated with the content of the div. As seen below:
<div class="dinnersWeeks">
<div class="startingDate">8/25/2013 12:00 AM</div>
<div class="endingDate">8/31/2013 12:00 AM</div>
<div class="weekLinkMenus">testweek.aspx</div>
</div>
<div class="dinnersWeeks">
<div class="startingDate">9/1/2013 12:00 AM</div>
<div class="endingDate">9/7/2013 12:00 AM</div>
<div class="weekLinkMenus">generalweek11.aspx</div>
</div>
<div class="dinnersWeeks">
<div class="startingDate">9/8/2013 12:00 AM</div>
<div class="endingDate">9/14/2013 12:00 AM</div>
<div class="weekLinkMenus">generalweek12.aspx</div>
</div>
And I'm stuck trying to identify if the current date falls between the start date and end date of each week's div.
$('div.dinnersWeeks').each( function() {
sd = new Date( $(this).find( 'div.startingDate' ).text() );
ed = new Date( $(this).find( 'div.endingDate' ).text() );
currentDate = new Date();
console.log(check > sd && currentDate < ed);
});
After that I'll assign an ID to the div that is the current week and the div that is next week.
Any guidance would be greatly appreciated.
The following should work. I think checked was a typo in your original code. I also added an example of changing the background colour. This could be easily changed to set the id with your preference.
JavaScript
$('div.dinnersWeeks').each( function() {
sd = new Date( $(this).find( 'div.startingDate' ).text() );
ed = new Date( $(this).find( 'div.endingDate' ).text() );
currentDate = new Date();
if(currentDate > sd && currentDate < ed) {
$(this).css('background-color', 'red');
}
});
JSFiddle: http://jsfiddle.net/markwylde/4wuwZ/
Just on a side note, if you are wanting to do a lot of date related tasks in this project I would look into the moment.js framework, or one like it. There's a nice stackoverflow post over here explaining a tidy way you could do the above using it:
I assume you're outputting the HTML with a server side language? If that's the case, I would just add an attribute to the div with the Unix time and run the comparators off of that. I'm sure there's a library to do date comparisons in jQuery, but if you're not trying to do anything complicated you could just use Unix.
<div class="dinnersWeeks">
<div class="startingDate" z-start-unix="3000392">8/25/2013 12:00 AM</div>
<div class="endingDate" z-end-unix="3001394">8/31/2013 12:00 AM</div>
<div class="weekLinkMenus">testweek.aspx</div>
</div>
Then:
$('div.dinnersWeeks').each( function() {
currentDate = Math.round(new Date().getTime() / 1000);
console.log(check > $(this).find('div.startingDate').attr('z-start-unix') && currentDate < $(this).find('div.endingDate').attr('z-end-unix'));
});
i have problem with my script using jquery.countdown.js plugin, it doesn't sets multiple instances for each element i pass it to, it always sets the first instance for all, so countdowns are always the same.
link to plugin : http://keith-wood.name/countdown.html
$(function(){
$.each($('.countdown'), function() {
var _element = '.countdown-'+$(this).attr("id");
if($(_element).length > 0){
var _expDate = $(_element).attr('data-expiration').split(',');
var _datetime = Date(_expDate);
init_countdown(_element,_datetime);
}
});
});
function init_countdown(_element,_datetime){
console.log(_element + ", " + _datetime)
$(_element).countdown({
until: _datetime,
format: 'yowdHMS'
});
}
HTML:
<h5 class="muted countdown countdown-1" id="1" data-expiration="2014,10,26,14,10,35"> 2014-10-26 14:10:35</h5>
<h5 class="muted countdown countdown-2" id="2" data-expiration="2014,10,26,16,10,35"> 2014-10-26 16:10:35</h5>
<h5 class="muted countdown countdown-3" id="3" data-expiration="2014,10,26,18,10,35"> 2014-10-26 18:10:35</h5>
this is how it outputs
how can i fix this?
console.log()
.countdown-1, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
.countdown-2, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
.countdown-3, Sun Oct 28 2012 22:10:09 GMT+0100 (CET)
#Asad example:
The date constructor (in the form you are using it) accepts several integer values, not an array. You need to turn each value in the array that results from your split into a integer (using parseInt), then pass each argument individually, and not as an array.
Try this:
var _expDate = $(_element).attr('data-expiration').split(',');
_expDate.forEach(function(v,i,a){a[i]=parseInt(a[i]);});
var _datetime = new Date(_expDate[0],_expDate[1],_expDate[2],_expDate[3],_expDate[4],_expDate[5]);