Valid format of ranges for vue2-daterange-picker - vuejs2

Using vue2-daterange-picker I search how to hide left selection items, as 'Today','Yesterday',
'This month', 'This year', but I did fin valid format.
In the docs I found :
default ranges object (set to false to hide ranges) {
'Today',
'Yesterday',
'This month',
'This year',
'Last week',
'Last month', }
making :
<date-range-picker
:opens="date_range_picker_locale_opens"
#update="updateValues"
:singleDatePicker="true"
:locale-data="dateRangePickerLocale"
:autoApply="true"
:ranges="defaultRanges"
:show-dropdowns="false"
:alwaysShowCalendars="false"
v-model="ad_expire_date"
class="form-control editable_field"
>
<div slot="input" slot-scope="picker">
{{ picker.startDate | date }}
</div>
</date-range-picker>
...
defaultRanges: { // I got a eslint syntax errors
'Today',
'Yesterday',
'This month',
'This year',
'Last week',
'Last month',
},
Which is valid format?
"vue": "^2.6.11",
"vue2-daterange-picker": "^0.4.4",
Thanks!

Valid decision was to set property to false :
<date-range-picker
:opens="date_range_picker_locale_opens"
#update="updateValues"
:singleDatePicker="true"
:locale-data="dateRangePickerLocale"
:autoApply="true"
:ranges="false"
:show-dropdowns="true"
v-model="ad_expire_date"
class="form-control"
>
<div slot="input" slot-scope="picker">
{{ picker.startDate | date }}
</div>
</date-range-picker>
Not to forhet set : before property name

Related

Vuetify: autocomplete components unable to build as the expected

Now I want to build a autocomplete box but I'm unable to build as the image shown below. Please help me to fix this. THe default value for the room is 1 and the column should be allowed user to click on the option but not allowed them to type. Thank you.
<v-autocomplete
v-model="room"
:items="rooms"
label="room"
></v-autocomplete>
data() {
return {
rooms: ['1 Room', '2 Rooms', '3 Rooms'],
};
},
Using v-select is a better component to use if the user shouldn't be able to type anything in the selection box. The v-select API documentation lists a selection slot to customize the appearance of the selected item. Using this slot you can choose to show only the first character, which matches your requirements for "1 Room" to display as "1".
<template>
<v-select v-model="tempForm.roomCMS" :items="rooms" outlined label="Rooms">
<template v-slot:selection="{ item }">
{{ item.charAt(0) }}
</template>
</v-select>
</template>
<script>
export default {
data() {
return {
tempForm: {
roomCMS: 1
},
rooms: ['1 Room', '2 Rooms', '3 Rooms', '4 Rooms', '5 Rooms', '6 Rooms', '7 Rooms', '8 Rooms']
};
}
};
</script>
codepen demo

Validate dynamic fields using v-validate field binding

I'm validating date in datetime picker using the following code:
<tr v-for="(input,k) in inputs" :key="k">
<datetime v-validate="validators.ArrivalDate" format="YYYY-MM-DD H:i:s" name="arrivalDateTime" v-model="input.arrivalDateTime" ></datetime>
<tr>
script:
data(){
return {
validators: {
ArrivalDate: {
required: true,
date_format: 'yyyy-MM-dd HH:mm:ss',
after: this.inputs.departureDateTime,
}
},
inputs: [
{
name:'',
arrivalDateTime: '',
departureDateTime:'',
}]
..
i want arrival date time should be greater than this.inputs.departureDateTime Departure field date time. Only issue is i want to pass index of fields also to after:this.inputs.departureDateTime.
Any help is highly appreciated.
You could use a v-validate string, containing a dynamic value of after for each v-for iterator:
<tr v-for="(input,k) in inputs" :key="k">
<datetime
name="departureDateTime"
v-validate="'date_format:yyyy-MM-dd HH:mm:ss|required'"
v-model="input.departureDateTime"
>
</datetime>
<datetime
name="arrivalDateTime" 👇
v-validate="`after:${input.departureDateTime}|date_format:yyyy-MM-dd HH:mm:ss|required`"
v-model="input.arrivalDateTime"
>
</datetime>
<tr>
demo

Get today's date in data to use for vuetify component

I want to use a vuetify calendar that highlights todays date, how would I get it in the data or set it as a variable in the data?
This is the example calendar code on the vuetify page. Calendar Page. This is the first example the week view.
<template>
<v-row>
<v-col>
<v-sheet height="400">
<v-calendar
ref="calendar"
:now="today"
:value="today"
:events="events"
color="primary"
type="week"
></v-calendar>
</v-sheet>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
today: '2019-01-08',
eventsMap: [
{
name: 'Weekly Meeting',
start: '2019-01-07 09:00',
end: '2019-01-07 10:00',
},
{
name: 'Thomas\' Birthday',
start: '2019-01-10',
},
{
name: 'Mash Potatoes',
start: '2019-01-09 12:30',
end: '2019-01-09 15:30',
},
],
}),
mounted () {
this.$refs.calendar.scrollToTime('08:00')
},
}
</script>
How can I get the current date and set it to a variable in the data something like this?
today: currentDate
For Vuetify calendar component, add the following to data: () => ({
today : new Date().toISOString().substr(0, 10),
Define a variable in the data section:
today: new Date()
This will give you today's date. Then you may use it in your component

Can't update dynamic title in for loop using vue

I have an array of objects which I want to list with titles for the month. Not every object in the loop will have a title, it would only show the title if the month in the sequential objects change
So for example the object might look like
data [
{date:'January', info: 'some other data'},
{date:'January', info: 'some other data'},
{date:'February', info: 'some other data'},
{date:'February', info: 'some other data'},
{date:'March', info: 'some other data'},
{date:'March', info: 'some other data'},
];
The loop looks something like this
<div v-for="d in data" :heading="getDate(d.date)" >
{{ heading }}
<p> {{ d.info }}</p>
</div>
The showDate function is in the methoods section
data() {
return {
currentmonth: ""
}
},
methods: {
getDate(date) {
if (date != this.currentmonth) {
this.currentmonth = date
return "<h2>" + date + "</h2>"
} else {
return ""
}
}
So I only want to show the H2 when the date changes between objects in the loop, so the out come would be
<div>
<h2>January<h2>
<p>some other data</p>
</div>
<div>
<p>some other data</p>
</div>
<div>
<h2>February<h2>
<p>some other data</p>
</div>
<div>
<p>some other data</p>
</div>
<div>
<h2>March<h2>
<p>some other data</p>
</div>
<div>
<p>some other data</p>
</div>
but the outcome I keep getting is
[Vue warn]: You may have an infinite update loop in a component render function.
Apparently it's because my getDate checks the date in the vm and also updates it from the same function. I've tried watchers, computed properties but just can't figure this one out.
I think you should adjust your rendering so that you aren't trying to do so much logic as you are actually rendering. Rather than hand Vue a list of dates and have it figure out how to group them within the rendering, precompute the grouped dates and just have Vue render the groupings.
function contiguify(arr) {
const contiguousArr = [];
for (const d of arr) {
const lastMonthAdded = contiguousArr.length ?
contiguousArr[contiguousArr.length - 1].date :
null;
if (!lastMonthAdded || d.date !== lastMonthAdded) {
contiguousArr.push({
date: d.date,
infos: [
d.info
]
});
} else {
contiguousArr[contiguousArr.length - 1].infos.push(d.info);
}
}
return contiguousArr;
}
const app = new Vue({
el: "#app",
data() {
return {
dates: [{
date: 'January',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'January',
info: 'some other data'
},
{
date: 'February',
info: 'some other data'
},
{
date: 'February',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'February',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
},
{
date: 'March',
info: 'some other data'
}
]
};
},
computed: {
contiguousDates() {
return contiguify(this.dates);
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
<div v-for="d in contiguousDates">
<h2>{{ d.date}}</h2>
<p v-for="i in d.infos">{{i}}</p>
</div>
</div>
I fixed this in the end by passing the array index into the for loop, then i used the current and previous index to compare the dates. if they were different I printed it out.

Vue.js connected data for multiple select option

Here is my code
<li>
<select v-model="selectYear" id="search-year" class="w-100 text-center mb-1" name="year" >
<option v-for="year in years" v-bind:value="year.value">
{{ year.text }}
</option>
</select>
</li>
<li>
<select v-model="selectMake" class="w-100 text-center mb-1" name="make">
<option v-for="make in makes" v-bind:value="make.value">
{{ make.text }}
</option>
</select>
</li>
and the components data:
export default {
name: 'search',
data: function () {
return{
selectYear: '2017',
years: [
{ text: '2017', year: '2017' },
{ text: '2016', year: '2016' },
{ text: '2015', year: '2015' }
],
selectMake: '',
makes: [
{ text: 'Sony', value: 'Sony', year: '2017' },
{ text: 'Asus', value: 'Asus', year: '2017' },
{ text: 'IPhone', value: 'IPhone', year: '2016'}
]
}
}
}
What I want
I have multiple select options that is connected in terms of what only to show depending on the previous selected option.
For example
Scenario 1: Year Selected: 2017
Select Make Options Available: ['Sony','Asus']
Scenario 2: Year Selected: 2017
Select Make Options Available: ['Iphone']
Scenario 3: Year Selected: None
Select Make Options Available: []
Is it possible to implement in Vue.js?
this is a typical case where you would use computed values.
add a computed value filteredMakes to filter makes based on selectYear
computed: {
filteredMakes() {
return this.makes.filter((obj, i) => {
return obj.year === this.selectYear
});
}
}
and use the computed value in the v-for for option
<option v-for="make in filteredMakes" v-bind:value="make.value">
filteredMakes will be updated automatically everytime selectYear changes. ain't Vue magical ?