For some reason, I am having problems getting my date select text box to display the proper DAY in my mm/dd/yyyy section. It seems to be subtracting one off of the day when I select january 4th it will display January 3rd. If any advice could be spared it would be greatly appreciated, as I am a mere novice.
Here is some code supporting this problem, if any more information or code is needed feel free to ask.
This is my AddEntry.vue page
<script>
export default {
data() {
return {
location: "",
endUser: "",
orderNumber: "",
date: null,
application: "",
serviceTech: "",
department: "",
hours: 0,
travelHours: 0,
contactName: "",
reason: "",
};
},
computed: {
serviceEntry() {
let tmpEntry = {};
tmpEntry.location = this.location;
tmpEntry.endUser = this.endUser;
tmpEntry.orderNumber = this.orderNumber;
tmpEntry.date = this.date;
tmpEntry.application = this.application;
tmpEntry.serviceTech = this.serviceTech;
tmpEntry.department = this.department;
tmpEntry.hours = this.hours;
tmpEntry.travelHours = this.travelHours;
tmpEntry.contactName = this.contactName;
tmpEntry.reason = this.reason;
return tmpEntry;
},
},
methods: {
setServiceDate(event) {
// alert(event.target.valueAsDate.toLocaleDateString('en-US'))
this.date = event.target.valueAsDate;
// alert(this.date)
},
formatDate(date) {
var d = new Date(date),
month = "" + (d.getMonth() + 1),
day = "" + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = "0" + month;
if (day.length < 2) day = "0" + day;
return [year, month, day].join("-");
},
async submitItem() {
if (this.$store.dispatch("createServiceEntry", this.serviceEntry))
this.$router.push({
path: `/`,
});
},
},
mounted() {
this.date = new Date();
},
};
</script>
This is a common problem. It's because the date is stored with a time and sometimes the timezone is different between the application and the browser viewing it.
One work-around is to strip the timezone if you only care about dd/mm/yyyy
computed: {
fixedDate() {
const date = new Date(this.date).toString().substring(0,15)
return date
},
// you would use {{ fixedDate }} in your html template
...
}
What this does is strip the timezone (UTC, for example, which is 6 hours ahead if you're in EST. Meaning anytime after 6pm, it could show as +1 days)