I have written few lines of code using javascript in Vue framework. I can not display date on html from var. I used vue-bootstrap for styles. Any suggestion is app?
<template>
<div class="app">
<b-form-datepicker id="datepicker" class="weekpicker" placeholder="Select a week" local="en"></b-form-datepicker>
<div class="w-75 p-3 mb-1 text-light">
<b-form-select class="weekpicker" onfocus="myFunction()">
<b-form-select-option hidden value="">Select a week</b-form-select-option>
<b-form-select-option id="mydate" value="">{{ myFunction() }}</b-form-select-option>
<b-form-select-option type="date" value=""></b-form-select-option>
<b-form-select-option type="date" value=""></b-form-select-option>
</b-form-select>
</div>
<button><span>Submit</span></button>
</div>
</template>
<script>
export default {
name: 'TS_home',
data() {
return {
};
},
methods: {
myFunction() {
let x = new Date();
let current_date = x.toDateString();
x.setDate(x.getDate() + 7);
let seventh_date = x.toDateString()
document.getElementById("mydate").innerHTML = current_date + " - " + seventh_date;
}
}
};
</script>
As #Phil said since you are using Vue you should define the data property for the date like so:
data() {
return {
myDate: null
}
}
When it comes to date pickers it is usually #change event or v-model.
Try:
<b-form-datepicker id="datepicker" class="weekpicker" placeholder="Select a week" local="en" #change="myDate=$event"></b-form-datepicker>
Then display the property in your HTML template like:
{{myDate}}
Another possibility is to use vue-bootstrap if that is not what you have installed already. You would do it like this:
npm install vue-bootstrap-datetimepicker --save
then in your component
// Import required dependencies
import 'bootstrap/dist/css/bootstrap.css';
// Import this component
import datePicker from 'vue-bootstrap-datetimepicker';
then in your data
data() {
return {
myDate: new Date(),
options: {
format: 'DD/MM/YYYY',
useCurrent: false,
}
}
}
and in your HTML template
<date-picker v-model="myDate" :config="options"></date-picker>
and to display that date you would again use:
{{myDate}}
Please refer to the documentation for more detailed information.
I hope it helps. Good luck.
You should use the data property instead of manipulating the dom
data() {
return {
myDate: ''
}
}
Inside the function
myFunction() {
let x = new Date();
let current_date = x.toDateString();
x.setDate(x.getDate() + 7);
let seventh_date = x.toDateString()
this.myDate = current_date + " - " + seventh_date;
}
In the html, use the vue-event handler
<b-form-select class="weekpicker" #focus="myFunction()">
<b-form-select-option id="mydate" value="">{{ myDate }}</b-form-select-option>
Hope this will help :)
Related
I'm using version 6 of Tempus Dominus, whose documentation is found at https://getdatepicker.com/6/.
My question is:
How do I set the date format?
I have this HTML control:
<div class="col-auto">
<label for="fromDateInput">From date:</label>
<div class="input-group" id="fromDate" data-td-target-input="nearest" data-td-target-toggle="nearest">
<input id="fromDateInput" type="text" class="form-control" data-td-target="#fromDate">
<span class="input-group-text" data-td-target="#fromDate" data-td-toggle="datetimepicker"><span class="fa-solid fa-calendar"></span></span>
</div>
</div>
And I have the following JavaScript configuration of the Tempus Dominus datepicker control:
const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
display: {
components: {
clock: false
}
},
localization: {
startOfTheWeek: 1
}
});
In the browser, the control looks like this:
I then select a date:
As you can see in the field, the date is written as 06/22/2022. However, I would like the format to be YYYY-MM-DD, such that the date in this instance becomes 2022-06-22. How do I achieve that?
I found documentation for it on the plugins overview page: https://getdatepicker.com/6/plugins/
It has the following example:
Per Picker
It is possible to use this system per picker. For instance:
const td = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
td.dates.formatInput = function(date) { {return moment(date).format('MM/DD/YYYY') } }
The code above would affect a single picker but not globally. You could easily adapt this code to have a common formatting function taking in a format string.
So I adapted my code in the following way:
const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {
display: {
components: {
clock: false
}
},
localization: {
startOfTheWeek: 1
}
});
picker.dates.formatInput = date => moment(date).format('YYYY-MM-DD')
And now the date format looks like I want it:
As you can see, the date is now written 2022-06-22.
And in case you don't want to use moment.js…
const picker = new tempusDominus.TempusDominus(document.getElementById('fromDate'), {});
picker.dates.formatInput = date =>
date.getFullYear() + '-' +
("0"+(date.getMonth() + 1)).slice(-2) + "-" +
("0" + date.getDate()).slice(-2);
After submit form, correct format changes to default format.
if using jquery, and your plugin is >= 6.2.7.
load the plugins customDateFormat.js
set your tempusDominus to extend custom format
tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);
Complete code like
tempusDominus.extend(window.tempusDominus.plugins.customDateFormat);
$('#fromDate').tempusDominus({
localization: {
format: 'yyyy-MM-dd',
}
});
Reference:
https://getdatepicker.com/6/plugins/customDateFormat.html
I want to call a function on data change through v-model
HTML Part:
<input
type="date"
name="date"
id="date"
v-model="inputDate"
#change="recallMeetingDetails"
/>
VueJS Part:
data(){
return(){
inputDate: new Date().toISOString().slice(0, 10),
}
}
methods: {
recallMeetingDetails(){
console.log(this.inputData);
}
}
Now this code works fine, but in the console, I am getting the following error:
[Vue warn]: You may have an infinite update loop in a component render function.
How can I do the functionality through any other method?
You can try like following snippet :
new Vue({
el: '#demo',
data(){
return {
inputDate: new Date().toISOString().slice(0, 10)
}
},
methods: {
recallMeetingDetails(date){
this.inputDate = new Date(date).toISOString().slice(0, 10)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<input
type="date"
name="date"
id="date"
:value='inputDate'
#input="recallMeetingDetails($event.target.value)"
/>
<h3>{{ inputDate }}</h3>
</div>
Using v-model is a great idea!
Use a watcher to watch the reactive data instead of #change on the input element, and call a function when the reactive variable changes: like this
<template>
<input
type="date"
name="date"
id="date"
v-model="inputDate"
/>
</template>
<script>
export default {
data() {
return {
inputDate: new Date().toISOString().slice(0, 10)
}
},
watch: {
inputDate(value) {
console.log(value)
}
}
}
</script>
v-model watches for the value and updates it in data, try to use v-bind:value="inputDate" instead of v-model
So I managed to find a solution, the issue was in a different function.
In data(), I had 2 variables, which I was altering in a different function.
data(){
return{
inputDate: new Date().toISOString().slice(0, 10),
topValue: 0,
heightValue: 78,
}
}
fnWithIssue(x,y){
this.topValue = x + this.topValue;
this.heightValue = y + this.heightValue;
return{
top: `${topValue}px`,
height: `${heightValue}px`,
}
}
Then in a template, I was passing the aforementioned return as Inline styling, the template was in turn inside a v-for, which caused the infinite loop
Instead I was able to fix the issue by removing the data's topValue and heightValue and just decalred them in the fnWithIssue(x,y)
fnWithIssue(x,y){
let topValue = x + topValue;
let heightValue = y + heightValue;
return{
top: `${topValue}px`,
height: `${heightValue}px`
}
}
I have a problem with the comparison of my go dates with the return date. Since this morning I have tried several things but nothing works. I would like to display an error message if the person selects the same date as the return. But this doesn't work. Who can tell me what's wrong with my code? thanks in advance :)
<template>
<div >
<datepicker v-model="dateSelectAller" lang="fr" type="date" format="dd-MM-YYYY" :lowerLimit="Date.now()" ></datepicker>
</div>
<div v-show="!isSuccess">
<span class="error-text" v-if="errors.timeAllerErrors">{{ errors.timeAllerErrors }}</span>
</div>
<div >
<datepicker v-model="dateAnterieurRetour" lang="fr" type="date" format="dd-MM-YYYY" :lowerLimit="Date.now()"></datepicker>
</div>
<div v-show="!isSuccess">
<span class="error-text" v-if="errors.dateRetour">{{ errors.dateRetour }}</span>
</div>
</template>
<script>
data(){
return{
format,
dateSelectAller:new Date(),
dateAnterieurRetour: new Date(),
isSuccess:false,
errors:{}
}
}
beforeMount(){
this.dateAnterieurRetour = this.dateAnterieurRetour.setDate(this.dateAnterieurRetour.getDate() +1)
},
watch:{
dateSelectAller(newValue){
if(newValue >= this.dateAnterieurRetour){
this.errors['dateAller'] = 'Choisir une date inférieur à celle de retour'
}else{
this.errors['dateAller'] = ''
}
console.log(newValue)
if(this.date1 === this.date2){
return this.errors['timeRetourErrors'] = 'test erreur'
}else{
return this.errors['timeRetourErrors'] = ''
}
},
dateAnterieurRetour(newValue){
console.log(newValue)
if(newValue <= this.dateSelectAller){
this.errors['dateRetour'] = 'la date choisi n\' est pas valide!'
}else{
this.errors['dateRetour'] = ''
}
console.log(newValue)
},
},
methods:{
getFormat () {
return this.format(new Date(this.dateSelectAller) , 'dd-MM-yyyy', {locale: window.locale})
} ,
getFormatRetour () {
return this.format(new Date(this.dateAnterieurRetour) , 'dd-MM-yyyy', {locale: window.locale})
} ,
}
</script>
Where are you setting isSuccess? Right now it looks like the error divs will never appear since isSuccess isn't in your data or computed values
Thank you all for trying to help me. I have just found a solution, that when the outgoing date and the same as the return date, the return date will advance by one day more. The problem came from the date format since when I retrieved my date it arrived in this format: 12251511511 and the outgoing date: 12/04/2021 that's why. I therefore change the format of the return date so that it can be compared to the outgoing date. :)
How can I hide the calendar after a date is selected? I am using Date-time-picker by DanyelYKPan.
Is there a specific function that I can use? My code below
<div class="col-3">
<div class="form-group calenderForm calenderForm1">
<label for="templateName">REPAIR DATE (FROM)</label>
<owl-date-time name="repairDateFrom"
[(ngModel)]="repairDateFrom"
[max]="max"
[type]="'calendar'"
[dateFormat]="'YYYY-MM-DD'"
[placeHolder]="'YYYY-MM-DD'"
></owl-date-time>
<div class="error-message-block"></div>
<input type="hidden" name="repairDateFrom" id = "repairDateFrom" value="
{{repairDateFrom | date: 'yyyy-MM-dd'}}" (click)="closeDatePopUp()"/>
</div>
</div>
From top of the code through picker plugin component call will goes to below function.
DateTimePickerComponent.prototype.updateFormattedValue = function () {
var formattedValue = '';
if (this.value) {
var d = new Date();
if (this.isSingleSelection()) {
this.value = this.value.setHours(d.getHours(), d.getMinutes());
formattedValue = date_fns_1.format(this.value, this.dateFormat,
{ locale: this.locale.dateFns });
$('.owl-calendar-wrapper').on('click',function(){
$('.owl-dateTime-dialog').hide();
});
}}}
I tried with above code it will works only one time after clicking on date field second time date popup will not come.
Please help me to solve this problem.
If I were you I would use the mechanism of Parent call of #ViewChild described in the angular Component Interaction page.
1 - import the DateTimePickerComponent
import { DateTimePickerComponent } from "ng-pick-datetime/picker.component"
2- Refer it to ViewChild and assign a variable name:
#ViewChild(DateTimePickerComponent) picker: DateTimePickerComponent;
3- Now you can access all non private attribute/method described here: https://github.com/DanielYKPan/date-time-picker/blob/master/src/picker.component.ts by this.picker
For hiding the calendar you can set the dialogVisible to false:
this.picker.dialogVisible = false
Now time to detect the click event in our calendar. The simplest way is to use (ngModelChange) event.
<owl-date-time
[(ngModel)]="repairDateFrom" name="repairDateFrom"
(ngModelChange)="onDateChange()"
[type]="'calendar'"
[dateFormat]="'YYYY-MM-DD'"
></owl-date-time>
And in our component :
onDateChange() {
this.picker.dialogVisible = false;
}
When the user clicks the button I want it to copy the vm.checkin (unix date) to the angular type=date field.
<input type="date" ng-model="vm.receiptForm.paidDate" id="receiptPaidDate">
<button ng-click="vm.receiptForm.paidDate = (vm.checkin * 1000) | date:'yyyy-MM-dd HH:mm:ss Z'">
<span class="size-tiny">Copy Date</span>
</button>
Is that possible to do? I cant seem to make it work.
The model for input[type=date] must always be a Date object, but date filter formats date to a string based on the provided format. You just need to convert your timestamp to a date as described here and then assign it to vm.receiptForm.paidDate.
UPDATE: as an option you can create your custom filter to achieve the desired functionality, see the code snippet below:
var module = angular.module("demo", []);
module.filter('tsToDate', function () {
return function (timestamp) {
return new Date(timestamp);
};
});
module.controller('Demo', [function Demo() {
var vm = this;
vm.checkin = 1529442000000;
vm.receiptForm = {
paidDate: ''
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="demo" ng-controller="Demo as vm">
<div>
<button ng-click="vm.receiptForm.paidDate = (vm.checkin | tsToDate)">Copy Date</button>
</div>
<input type="date" ng-model="vm.receiptForm.paidDate" />
<code>
{{ vm.receiptForm }}
</code>
</div>