I am using quasar date component with limiting dates.
The documentation says to use options prop to be supplied with an array or function.
<template>
<div class="q-pa-md">
<div class="q-gutter-md">
<q-date
v-model="date"
:options="options"
/>
<q-date
v-model="date"
:options="optionsFn"
/>
<q-date
v-model="date"
:options="optionsFn2"
/>
</div>
</div>
</template>
<script>
export default {
data () {
return {
date: '2019/02/01',
options: [ '2019/02/01', '2019/02/05', '2019/02/06', '2019/02/09', '2019/02/23' ]
}
},
methods: {
optionsFn (date) {
return date >= '2019/02/03' && date <= '2019/02/15'
},
optionsFn2 (date) {
const parts = date.split('/')
return parts[2] % 2 === 0
}
}
}
</script>
The problem is that I am not able to pass any other argument in the optionsFn function.
since options takes in a function call but you are passing options= the return result of that function is not allowed you can fix it to :options="date => optionsFn(date, 'test ')" and it will work as you want
Related
I have this html:
<template>
<div>
<div class="card text-center">
<h2><strong>Title: </strong>{{story.title}}</h2>
<p><strong>Score: </strong>{{story.score}}</p>
<p><strong>Author: </strong>{{story.by}}</p>
<p><strong>Date: </strong>{{ formatDate(story.time) }}</p>
<!--<p><strong>Date: </strong>{{ dateFormat(new Date(story.time*1000),v) }}</p> -->
<NuxtLink :to="`/${story.id}`">
<p class="btn my-4">View details</p> </NuxtLink>
</div>
</div>
</template>
and this scripts:
<script setup>
const { story } = defineProps(['story'])
export default {
data () {
return {
time: 0,
}
},
methods: {
formatDate(time) {
date = new Date(time).format("YYYY/MM/DD")
return date
}
}
}
</script>
I am not getting this kinda date format: "YYYY/MM/DD".
Please help how can I do that in Nuxt.js?
AFAIK, there isn't a single function call to achieve that. I would suggest you re-writing your formatDate using Date.toLocaleString to have full control of your format.
In addition, do not use export default in your <script setup>. It's not a valid syntax.
<script setup>
// Your other setup
function formatDate(time) {
const date = new Date(time);
// Get year, month, and day part from the date
const year = date.toLocaleString("default", { year: "numeric" });
const month = date.toLocaleString("default", { month: "2-digit" });
const day = date.toLocaleString("default", { day: "2-digit" });
return `${year}/${month}/${day}`;
}
</script>
You could use dayjs (tested with Nuxt 2.15)
yarn add #nuxtjs/dayjs
export default {
// ...
modules: [
'#nuxtjs/dayjs'
],
<template>
<div>
{{ $dayjs(new Date()).format('YYYY/MM/DD') }}
</div>
</template>
I want to try handle add new inutbox. I try to follow this example
https://demo.smarttutorials.net/vuejs-dynamically-add-remove-input-textbox/
but I can't do
This is i want todo
When i type number in inputbox
add new inputbox
if input 1 add 1
if input 2 add 2 box
My code
<DialogTitle as="h3" class="text-xl leading-6 font-medium text-gray-900 py-2">Transaction #1</DialogTitle>
<input type="text" v-model="inputs.sequence" #inputs='$emit("update:modelValue", inputs)' class="border border-gray-300 py-2 px-1 text-lg" />
export default {
name:'prize-editor',
components: {
DropImages,
date,
DialogTitle
},
props:{
modelValue:Object
},
setup(props){
let inputs = ref({
detail:'',
name:'',
startDate:'',
sequence:'',
rewardId:'',
imageUrl:"",
})
onMounted( () => {
inputs.value=props.modelValue
});
watch(props.modelValue, (value) => {
inputs.value = value
console.log('watch',value)
})
return{
inputs,
}
},
};
You have given little info about how those inputs are supposed to behave exactly, but if we imagine you want to store (and do something with) the value of each, you need an array. and a function that adds as many elements to that array as you put in the input (how you call the function is up to you):
addInput(number) {
for(let i = 0; i < number; i++) {
this.inputArray.push({ value: "" });
}
}
Then you need to use v-for to render inputs based on your array :
<input v-for="(input, index) in inputArray" :key="index" v-model="input.value" type="text" />
To access the elements you can use index (like inputArray[2].value for the third input's value).
This would be a full vue component with your what you want, note that its based on options api and has no styles, those are on yourself:
<template>
<div>
<input type="text" v-model="inputCounter" />
<button #click="setInputs">Set</button>
<input v-for="(input, index) in inputs" :key="index" v-model="input.value" type="text" />
</div>
</template>
<script>
export default ({
data() {
return {
inputCounter: "",
inputs: []
}
},
methods: {
setInputs() {
for(let i = 0; i < parseInt(this.inputCounter); i++) {
this.inputs.push({ value: "" });
}
}
}
})
</script>
I have a parent component as a Cart. Here I defined quantity and I want to pass this quantity to the child component's input value which is Counter. So here how I am passing it and here is my parent component, Cart:
<Counter quantity="item.quantity"/>
And here is my child component, Counter:
<template>
<div id="counter">
<button class="minus" #click="countDown"><i :class="quantity == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
<div class="count-number"><input class="counter-content" type="number" v-model="quantity"></div>
<button class="plus" #click="countUp"><i class="fas fa-plus"></i></button>
</div>
</template>
<script>
export default {
props: {
quantity: Number
},
methods: {
countUp() {
this.quantity++;
},
countDown() {
if(this.quantity > 0) {
this.quantity--;
}
},
}
}
</script>
I am quite new in Vue, so maybe I am doing something wrong when I pass the props. So could you help me about this?
Try (with the : colon sign)
<Counter :quantity="item.quantity"/>
Before you were just passing the string "item.quanity"
I see you're modifying your prop directly:
countUp() {
this.quantity++;
},
countDown() {
if(this.quantity > 0) {
this.quantity--;
}
},
This is not how you do it in Vue. You need to use two way binding.
countUp() {
this.$emit('input', this.quantity+1)
}
countDown() {
this.$emit('input', this.quantity-1)
}
and in your parent component:
<Counter :quantity="item.quantity" #input="(payload) => {item.quantity = payload}"/>
By the way, the Vue styleguide recommends to use multi-word component names: https://v2.vuejs.org/v2/style-guide/#Multi-word-component-names-essential (Cart = bad, MyCart = good)
We cannot change the value that we get from props, so I created a variable and put props there when mounting
Try it
<Counter :quantity="item.quantity"/>
and
<template>
<div id="counter">
<button class="minus" #click="countDown"><i :class="sum == 0 ? 'disabled' : ''" class="fas fa-minus"></i></button>
<div class="count-number"><input class="counter-content" type="number" v-model="sum"></div>
<button class="plus" #click="countUp"><i class="fas fa-plus"></i></button>
</div>
</template>
<script>
export default {
props: {
quantity: Number
},
data: () => ({
sum: 0
}),
mounted() {
this.sum = this.quantity;
},
methods: {
countUp() {
this.sum++;
},
countDown() {
if(this.sum > 0) {
this.sum--;
}
},
}
}
</script>
I am trying to format my data to send it to parent component but it seem like it is not reactive
if(this.selectedDate !== '' && this.selectedMonth !== '' && this.selectedDate !== '' ){
this.$emit("emit-data", this.selectedYr+"-"+moment().set(this.selectedDate) .format("DD")+"- "+moment().set(this.selectedMonth).format("MM"))
}
It won't send the selected drop-down but default ones which were pre-selected on page load. But If I take off moment() format from the data being sent, it sent correct values but I still need that format the data be in e.g YYYY-DD-MM
Is there any way to do this is computed using setters and getters before emitting? I am not sure how but If there is a way?
Yes, you can absolutely use a reactive computed getter for this. Here is an example:
<div id="app">
<parent-component />
</div>
const parentComponent = Vue.component('parent-component', {
data () {
return {
formattedDate: null
}
},
template: `
<div>
<p>You have selected: {{ formattedDate || "nothing yet" }}.</p>
<child-component
#emit-data="(payload) => formattedDate = payload"
/>
</div>
`
})
const childComponent = Vue.component('child-component', {
data () {
return {
selectedDate: null,
selectedMonth: null,
selectedYear: null
}
},
computed: {
formattedDate () {
if (![this.selectedDate, this.selectedMonth, this.selectedYear].every((el) => el)) return null
return moment({
day: this.selectedDate,
// Months in Moment.js are 0-indexed!
month: this.selectedMonth - 1,
year: this.selectedYear
}).format("YYYY-DD-MM")
}
},
watch: {
formattedDate (newVal) {
this.$emit("emit-data", newVal)
}
},
template: `
<div>
<input v-model="selectedDate" type="number" placeholder="Day" min="1" max="31" step="1">
<input v-model="selectedMonth" type="number" placeholder="Month" min="1" max="12" step="1">
<input v-model="selectedYear" type="number" placeholder="Year" min="1900" max="2100" step="1">
</div>
`
})
new Vue({
el: "#app"
})
You can run the above interactively on https://jsfiddle.net/46vuLcy0/.
Try
this.$emit('emit-data', moment(new Date(this.selectedMonth + "-" + this.selectedDate + "-" + this.selectedYr)).format(YYYY-DD-MM))
You can also see these examples
UPDATE
In the above code, your data is processed in to moment date. The result of this can be formatted in to your desired format.
Example
If you want the date to be 15-JUL-2020, you can have
moment(/* your date */).format('DD-MMM-YYYY')
Your can be directly provided to moment like
this.$emit("emit-data", moment(this.selectedYr + "-" + this.selectedDate + "-" + this.selectedMonth).format("YYYY-DD-MM"))
The code will result something like 2020-15-07 based on the format.
I need to change type of datepicker value and it should return value as type Date instead of String https://prnt.sc/r6vr3g. But i don't know how can i make it.
Can anyone pls help me?
Here is code:
<template>
<q-input
#focusin="onFocusIn"
:value="value"
#input="e => $emit('input', e.toString())"
#click="alert = true"
>
<q-dialog v-model="alert">
<q-date
:value="value" #input="onInput"
:mask="mask"
/>
</q-dialog>
<script>
import _ from 'lodash'
export default {
props: {
..props
},
data () {
return {
alert: false,
sValue: ''
}
},
..computed
methods: {
onInput (e) {
let dateObj = new Date(e)
this.$emit('input', dateObj)
this.alert = false
},
onFocusIn (e) {
e.target.blur()
}
}
}
</script>
<style type="text/css">
</style>
<div class="col">
<s-datetime-picker v-model="data.dateStart" label="Date Start" required />
{{ data.dateStart }}
</div>
Here is code for datepicker component and after that there si example of using this component.
I've edited code, because i changed component. Now i have another error, in input field it shows message 'Invalid Date' and in console i got this error "failed for prop "value". Expected String with value "Invalid Date", got Date"
Format your emitting object before emit
<template>
<q-datetime-picker
..more properties
:value="value"
#input="formatDate(e)"
/>
</template>
<script>
import _ from 'lodash'
export default {
props: {
...all properties
},
computed: {
sLabel () {
if (!this.required || _.isUndefined(this.label)) return this.label
return this.label + ' *'
},
sRules () {
if (!this.required) return this.rules
let rule = val => { if (val.length === 0) return 'This field is Required' }
if (_.isUndefined(this.rules)) return [ rule ]
return (_.cloneDeep(this.rules)).push(rule)
}
},
formatDate(val){
let dateObj = new Date(val);
this.$emit('input', dateObj);
}
}
</script>
<style type="text/css">
</style>
<div class="col">
<s-datetime-picker v-model="data.dateStart" label="Date Start" required />
{{ data.dateStart }}
</div>
Format your date according to your need in formatDate function.
Hope this helps you,
Just pass the value you are getting as string to new Date it will return a date object.
var dt = "2020-02-13T00:00"; // <-- this is the value you get from date picker
var dtObj = new Date(dt); // <-- this one is date type
Full Vue Code
<template>
<div id="app">
<input type="date" v-model="dateFromField">
<button :click="showDate()">Submit</button>
</div>
</template>
<script>
export default {
name: "App",
data: function() {
return {
dateFromField: Date
};
},
methods: {
showDate() {
console.log(this.dateFromField);
console.log(typeof this.dateFromField);
let newDate = new Date(this.dateFromField);
console.log("conversion");
console.log(newDate);
console.log(typeof newDate);
}
}
};
</script>