I am using https://www.npmjs.com/package/vue-multi-date-picker in my vuejs code
I want to know when I edit the form How to show selected dates in datepicker text.
for example I am using
<m-date-picker
v-model="date"
:lang="lang"
:multi="multi"
:always-display="false"
:format="formatDate"
data-parsley-required="true"
:class="{
'is-invalid':
submitted &&
$v.date.$error
}"
>
</m-date-picker>
export default {
name: "newspaper-result",
components: {
editor: Editor // <- Important part
},
data() {
return {
multi: true,
lang: "en",
date: [],
notClassified: true,
submitted: false
};
},
methods: {
formatDate(date) {
return date.toLocaleDateString();
},
}
Now when I insert the date in
this.date = date come from db gives error that date.toLocaleDateString(); is not a function
You are calling toLocaleDateString() function on a string, but strings don't have such function, this is why you are getting the error.
This function needs a properly constructed date object, not a string, so convert it using new Date():
formatDate(date) {
return new Date(date).toLocaleDateString()
}
Related
I am trying to create a custom Vue validator. I have reviewed their docs https://vuelidate.netlify.com/#custom-validators, as well as a very useful tutorial https://vuejsdevelopers.com/2018/08/27/vue-js-form-handling-vuelidate/.
However, I still don't see a clear example of how to do the following:
I have two datepicker input fields, a start and end date. I want to be able to create a validator which can
Check both dates in tandum to make sure that the end date is not before the start date
Have a single validation message based on this (aka: we don't want one field with 'Start date can't be before end date' and the other with 'End date can't be before start date')
This type of functionality (or using other fields values inside a different one) is basically what the core sameAs validator (see below) has:
import { ref, withParams } from './common'
export default (equalTo) =>
withParams({ type: 'sameAs', eq: equalTo }, function(value, parentVm) {
return value === ref(equalTo, this, parentVm)
})
I have tried to mimic this, but its not working...
import { ref, withParams } from 'vuelidate/lib/validators/common.js'
export default (endDate) =>
withParams({ type: 'dateRange', eq: endDate }, function(value, parentVm) {
console.log('parentVm', parentVm);
return value < ref(endDate, this, parentVm)
})
Its not even logging my console.log. Here is the code calling it
<date-picker id="financial-start-date" v-model="$v.start_date.$model" :config="datepickerConfig"></date-picker>
<date-picker id="financial-end-date" v-model="$v.end_date.$model" :config="datepickerConfig"></date-picker>
Validations:
validations: {
transaction_id: {
},
start_date: {
},
end_date: {
dateRange: dateRange('startDate')
}
},
Can be solved using the following code:
first create custom validator:
const isAfterDate = (value, vm) => {
return new Date(value).getTime() > new Date(vm.startDate).getTime();
};
Second, call the validator within validations:
endDate: {
required,
isAfterDate
}
data() {
return {
datePickerOptions: {
disabledDate(date) {
// console.log(form.installation_date); // undefined form
return date < this.form.ins_date ? this.form.ins_date : new Date();
},
},
}
This is saying form undefined i can understand can't initiaize form input inside data return how can i achieve this. disable other date if greater than first input date
please guide
As I said in my comment, you can't have a function returning something in your data so you have to shift your logic somewhere else. You can put that function in your methods:
data() {
return {
datePickerOptions: {
disabledDate: this.isDateDisabled
},
// rest of data
...
methods: {
isDateDisabled(date) {
return date < new Date(this.ruleForm.date1);
},
I am using vue-i18n in a vue project. And I found it really confusing when using some data in vue data with i18n. Then if I change locale, that data is not reactive. I tried to return that data from another computed data but anyways it is not reactive because i18n is written in data. *My situation - * I want to show table with dropdown(list of columns with checkbox) above it. When user checks a column it will be showed in table if unchecks it won't. It is working fine until I change locale. After changing locale table columns is not translated but dropdown items is reactively translated and my code won't work anymore. Here is some code to explain better: In my myTable.vue component I use bootstrap-vue table -
template in myTable.vue
<vs-dropdown vs-custom-content vs-trigger-click>
<b-link href.prevent class="card-header-action btn-setting" style="font-size: 1.4em">
<i class="fa fa-th"></i>
</b-link>
<vs-dropdown-menu class="columns-dropdown">
<visible-columns :default-fields="columns" #result="columnListener"></visible-columns>
</vs-dropdown-menu>
</vs-dropdown>
<b-table class="generalTableClass table-responsive" :fields="computedFieldsForTable">custom content goes here</b-table>
script in myTable.vue
data(){
return {
fieldsForTable: [];
}
},
computed: {
computedFieldsForTable () {
return this.fieldsForTable;
},
columns() {
return [
{
key: 'id',
label: this.$t('id'),,
visible: true,
changeable: true
},
{
key: 'fullName',
label: this.$t('full-name'),,
visible: true,
changeable: true
},
{
key: 'email',
label: this.$t('email'),,
visible: true,
changeable: true
}
]
}
},
mounted () {
this.fieldsForTable = this.filterColumns(this.columns);
},
methods: {
filterColumns(columns = []) {
return columns.filter(column => {
if (column.visible) {
return column
}
})
},
columnListener ($event) {
this.fieldsForTable = this.filterColumns($event)
}
}
Can someone give me some advice for this situation ?
*EDIT AFTER SOME DEBUGGING: I think when filtering columns(in computed) and returning it for fieldsForTable inside filterColumns(columns) method, it actually returning array(of objects) with label='Label Name' not label=this.$t('labelName'). So after filtering the new array has nothing to do with vue-i18n. My last chance is reloading the page when locale changes.
Trying modify computedFieldsForTable as follows. You need to reference this.columns in computedFieldsForTable, so that Vue can detect the change of labels in this.columns.
computedFieldsForTable () {
return this.filterColumns(this.columns);
},
EDITED: put your this.columns in data. Then
columnListener ($event) {
this.columns = $event;
}
I hope i didn't misunderstand what you mean.
EDITED (again):
Maybe this is the last chance that I think it can work. Put columns in computed() still and remove computedFieldsForTable. Finally, just leave fieldsForTable and bind it on fields of <b-table>.
watch: {
columns(val) {
this.fieldsForTable = this.filterColumns(val)
}
},
method: {
columnListener ($event) {
this.fieldsForTable = this.filterColumns($event)
}
}
However, I think it is better and easier to reload page whenever local change. Especially when your columns have a more complex data structure.
I am new to Vue.js
While rendering the html, I am invoking a Vue.filter. It should show a date in another format.
Below is my js file :
var details = new Vue({
el: '#ajax-article-detail',
data: {
message: 'Hello Vue.js!'
},
methods: {
showName: function() {
console.log('Calling showName...');
return 'Im Event';
}
}
});
Vue.filter('parseDate', function(date, format) {
if (date) {
//console.log(moment(String(date)).format(format));
return moment(String(date)).format(format);
}
});
and in html, I am calling like {{${start_date} | parseDate('ddd, Do MMM YYYY')}}
and as a response, I am getting same statement.
means, I am getting {{${start_date} | parseDate('ddd, Do MMM YYYY')}} as it is in html.
Can anyone please suggest what I did wrong ?
Thank you.
I have changed your code by adding the filter property within the Vue component creation.
var details = new Vue({
el: '#ajax-article-detail',
data: {
message: 'Hello Vue.js!'
},
methods: {
showName: function() {
console.log('Calling showName...');
return 'Im Event';
}
},
filters: {
parseDate: function(date, format) {
console.log('value passed: ' + date); //check the browser console if it is passed
if (date) {
//console.log(moment(String(date)).format(format));
return moment(String(date)).format(format);
}
}
});
Then use the filter like this-
{{2018-12-19 16:46:00 | parseDate('<your_date_format>') }}
However, you need to check if you are passing the value correctly. Try passing some hard coded string value first and check the console window.
I have an input attribute that I want to have text from a source and is two-way binded
// messages.html
<input type="textarea" v-model="newMessage">
// messages.js
data () {
newMessage: ''
},
props: {
message: {
type: Object,
required: true,
default () {
return {};
}
}
// the message object has keys of id, text, and hashtag
I would like the initial value of input to be message.text. Would it be appropriate to do something like newMessage: this.message.text?
EDIT
I tried adding :value="message.text" in input but that didn't really show anything
Yes, you can reference the props in the data function.
data(){
return {
newMessage: this.message.text
}
}