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>
Related
In my VueJS application I have a component with a form.
In that form I have a field to pick the date.
My requirement is to show an error message if the selected date is older than the current date.
Basically the selected date need to be either today's date or future date.
I'm using Moment JS.
I have following custom rule in my Validator.vue
const dateIsToday = (value) => {
var todayDate = moment(new Date()).format("DD-MM-YYYY");
var selectedDate = value;
return selectedDate>=todayDate;
};
But this works only if I selected an old date from the current month... Assume if the user has picked an older date from this month like 10-04-2022, then it'll show the error message.
But if the user selected an old date from last month or a past month like 10-01-2022, this won't show me the error message....
In my form.vue I have
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">Start date</p>
<div class="h-12">
<cs-date-picker
id="startDate"
v-model="project.start_date"
:default-selection="true"
:name="`${identifier}-start_at`">
</cs-date-picker>
<validator
:identifier="`${identifier}-validate-project`"
:rules="validations.startDate"
:name="`${identifier}-start_at`"
/>
</div>
</div>
And under my validations I have,
startDate: {
required: {
message: 'Project Start date is required.'
},
dateIsToday: {
message: 'Date has to be today's date or a future date.'
},
},
It seems that you are comparing strings. Instead you should make real use of moment and compare moment dates:
const dateIsToday = (value) => {
let todayDate = moment();
let selectedDate = moment(value, "DD-MM-YYYY");
return selectedDate.isSameOrAfter(todayDate);
};
Basically I have this calendar row with date info on each element:
I'm trying to stop that loop of single data so that each calendar item has it's own data about the current and the next days.
The first calendar element should always display the current day, the rest of the items are the remaining days
Template
<template>
<div class="wrapper">
<div class="calendar-wrapper">
<div class="calendar-row"
v-for="(day, idx) in dayArr"
:key="idx"
>
<div
id="card"
class="day-card unactive"
#click="test(idx)"
>
<div class="card-info">
<p class="name">{{ dayOfWeek }}</p>
<p class="day">
{{ currDay }}
</p>
</div>
<div class="dot-wrapper">
<div class="dot-status undone" />
<div class="dot-status undone" />
</div>
</div>
</div>
</div>
</div>
</template>
Script
setup() {
const moment = require('moment')
const m = moment
// Get the remaining month days starting from today:
const daysRemainingThisMonth = moment().endOf('month').diff(moment(), 'days');
// Turn the remaining days into an array for future rendering in the Template
let dayArr = Array(daysRemainingThisMonth)
// Get the index of a clicked calendar item:
const test = (idx) => {
console.log(idx + 1);
}
// Get the current day:
const currDay = m().format('D')
// Get the current week day:
const dayOfWeek = m().format('dddd')
}
I believe that there is a way to somehow access each calendar element and give it it's own data, but I have no idea how
I've changed your code using moment features and it shows correctly in this link.
As you see I use moment().add(<countingOfDiffrenceFromToday>, 'day') to reach the exact day and push it to the array and use it in v-for loop.
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.
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 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'));
});