I am using element ui datepicker from there. I want to disable past dates.
<el-date-picker
v-model="form.startDate"
type="date"
placeholder="Tarih Seçiniz."
style="width: 100%"
/>
Can you help me to handle this issue?
You can achieve this by adding a :disabled-date attribute in the <el-date-picker> element and pass the boolean value to this attribute based on the calculation.
<el-date-picker :disabled-date="disabledDate" ...
In Script:
const disabledDate = (time: Date) => {
const date = new Date();
const previousDate = date.setDate(date.getDate() - 1);
return time.getTime() < previousDate;
}
Related
I've been using the Vue Formulate library (which is awesome).
I need the user to only be able to pick a date from today (included) onwards.
I am using the "after" default for validation, but today (the current date) is not valid. In other words the validation kicks in when choosing todays date, and the form cannot be submitted.
What is the best way to get around this?
https://codesandbox.io/s/vue-formulate-reproduction-template-forked-kmpgq?fontsize=14&hidenavigation=1&theme=dark
A little workaround by giving the after attribute a Date value before today:
<template>
<FormulateInput
name="date"
label="Date:"
:validation="
'bail|required|after:' + new Date(Date.now() - 24 * 60 * 60 * 1000)
"
:validation-messages="{ after: 'The date has to be today or later' }"
type="date"
/>
</template>
https://codesandbox.io/s/vue-formulate-reproduction-template-forked-ky1hu?fontsize=14&hidenavigation=1&theme=dark
EDIT: In fact you can do it also with a computed property by returning the date before today.
After validation should defined by a Date. Here is the solution by calculating today by a computed property. Codesandbox
<template>
<FormulateInput
name="date"
label="Date:"
:validation="'bail|required|after:' + today"
:validation-messages="{ after: 'The date has to be today or later' }"
type="date"
/>
</template>
<script>
export default {
computed: {
today() {
return new Date().toLocaleDateString();
},
},
};
</script>
Im trying to get the target of each of datepicker rendered by v-for.
I need to disable different dates on each of the datepicker keeping in mind that the v-for loop is iterating over the elements variable which is a number that can be different in each execution .
I am using the prop date-disabled-fn to deactivate dates but I need that in each iteration this function also deactivates all the dates before the date loaded in the previous datepicker.
I know how to deactivate dates, but I need to know what datepicker I am in when executing the deactivation function in order to add the condition that deactivates dates.
This is the v-for loop.
<div v-for="elem in elements" :key="elem">
<label :for="'datepicker' + elem" v-text="'My element ' + elem"></label>
<b-form-datepicker
:id="'datepicker' + elem"
v-model="inputs.dates[elem]"
class="mb-2"
v-bind="labels[locale] || {}"
:date-disabled-fn="dateDisabled"
:locale="locale"
:start-weekday="weekday"
></b-form-datepicker>
</div>
And this the deactivation function in methods
dateDisabled(ymd, date) {
const weekday = date.getDay();
const day = date.getDate();
if(weekday === 0 || weekday === 6) {
return true
}
// I want to detect the target here.
}
The prop :date-disabled-fn uses two arguments show I don't know how to add a third argument or if there is some way to detect the target in another way.
Bootstrap-vue datepicker documentation
If you just need to send third arguements, then can't you do
:date-disabled-fn="(ymd, date) => dateDisabled(ymd, date, elem)"
I am using bsDaterangepicker when clicked it shows current month and next in the popup. All date ranges in my application are in the past, so I need to show current and previous month. How can I configure that?
You use this workaround to solve it:
In HTML:
<input
formControlName="dateRange"
type="text"
bsDaterangepicker
#rangePicker="bsDaterangepicker"
(onShown)="onDateRangePickerShow()"/>
</div>
In component:
export class Component {
#ViewChild('rangePicker') rangePicker;
onDateRangePickerShow() {
// This is a workaround to show previous month
const prevMonth = new Date(moment().subtract(1, 'month'));
this.rangePicker._datepicker.instance.monthSelectHandler({ date: prevMonth });
}
<template v-for="(paint, index) in paints">
<input type="number" v-bind:min="1" v-model.number="paint.qty">
</template>
-
var paintListApp = new Vue({
delimiters: ['${', '}'],
el: '#paintListApp',
data: {
paints: paints
},
methods: {
addToSet: function(sku, name, image) {
// method triggered when item is clicked - sends data to event bus
this.$eventHub.$emit('addToSelectedPaints', sku, name, image)
}
}
});
var paintWidget = new Vue({
el: '#paintWidget',
delimiters: ['${', '}'],
data: {
paints: []
},
created() {
// data picked up - processed by 'addToSelectedPaints'
this.$eventHub.$on('addToSelectedPaints', this.addToSelectedPaints);
},
methods: {
addToSelectedPaints: function (sku, name, image) {
var skuIndex = _.findIndex(this.paints, function (o) { return o.sku === sku; });
if (skuIndex !== -1) {
this.paints[skuIndex].qty = this.paints[skuIndex].qty + 1;
} else {
this.paints.push({
sku: sku,
name: name,
image: image,
qty: 1
});
}
}
}
});
Trying to get min values to work on number inputs. The min is respected by the browser number plus / minus controls - however, when using the keyboard, the min attribute appears to be ignored. I've tried all sorts of things from adding a method triggered by keyup etc and testing the value, through to watchers.
Keyup gets messy as when deleting, it automatically added a 1... making it difficult to type numbers above 19... (eg, you backspace to enter 2, but - it inserts a 1).
I just need to get native browser input min attribute working with keyboard input.
** Edit **
<input type="number" v-model="paint.qty" #change="paint.qty = paint.qty < 1 ? 1 : paint.qty">
Sort of solves the issue, albeit at the expense of the min attribute. Hooking into the #change event. If input is less than 1, switch it for 1. It also doesn't update until the input has lost focus - not locking the ui up. So not exactly the way I wanted it to work - but the result is the same.
** edit **
I've adapted Richard Matsens answer (the accepted one) to use an input and timeout... this behaves a bit more like the Chrome and Firefox native implementation.
<input type="number" min="1" v-model.number="paint.qty" #input="handleUpdate($event, index)">
and in the handleUpdate method:
...handleUpdate(event, index) {
var updater;
clearTimeout(updater);
this.currentIndex = index;
var paints = this.paints;
var max = this.max;
updater = setTimeout(function() {
if(event.target.value < event.target.min) {
paints[index].qty = parseInt(event.target.min);
}
if(event.target.value > max){
console.log(max);
paints[index].qty = parseInt(max);
}
}, 1000);
}...
clearing the timeout to prevent the updater bit firing too many times -
bouncing / mashing etc...
From this Validate input type number with range min/max
Most browsers “ignore” (it’s their default behavior) min and max, so that the user can freely edit the input field and type a number that’s not in the range 1-5.
From this How to detect changes in nested data, can use an #input on the control and a method() to handle the check.
Works for min="0", but say min="1" may be problematic if the user wants to type in "11".
Changed to blur event to handle above caveat.
methods: {
handleUpdate(event, index) {
if(event.target.value < event.target.min) {
this.paints[index].qty = event.target.min;
}
}
},
also add #blur() to the input
<div >
<input v-for="(paint, index) in paints"
#blur="handleUpdate($event, index)"
type="number" min="2" v-model.number="paint.qty">
</div>
For completeness, you may also want to add a validation message so that the user knows why the input value is being changed.
I am using Date Range Picker to select to dates now when I select the dates, I update the inputs with dates value respectively.
The inputs I have binded with v-model and created a function in watch attribute of component to observe the change in model.
But when the inputs are updated with the javascript function no change can be observed in the model but the value of my input fields are updated.
// My Input Fields
<input type="text" name="updateStartDate" v-model="updateDateRange.start">
<input type="text" name="updateEndDate" v-model="updateDateRange.end">
//My javascript Function
$('input[rel=dateRangePickerX]').daterangepicker({
'autoApply': true,
'drops': 'up',
'startDate': moment().add(90, 'days').calendar(),
'endDate': moment().add(97, 'days').calendar(),
locale: { cancelLabel: 'Clear' }
},
function (start, end, label) {
$('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY'));
$('input[name="updateEndDate"]').val(end.format('MM/DD/YYYY'));
});
// My watch attribute in Component
watch : {
'updateDateRange.end' : function (val) {
console.log('In Watch Function');
console.log(this.dateRanges);
if(val != '' && this.updateDateRange.start != '' && this.updateDateRangeIndex != ''){
console.log(val);
console.log(this.updateDateRange.start);
console.log(this.updateDateRangeIndex);
this.dateRanges[this.updateDateRangeIndex] = this.updateDateRange;
this.updateDateRangeIndex = '';
this.updateDateRange.start = '';
this.updateDateRange.end = '';
console.log(this.dateRanges);
}
}
}
I don't like to mix jQuery and Vue because jQuery messes up the DOM. Even more, I find it completely unnecessary.
Simple only with native Vue you can do it like this:
<input type="text" name="updateStartDate" v-model="startDate" #input="onInput()">
<input type="text" name="updateStartDate" v-model="endDate" #input="onInput()">
methods: {
onInput(e): function () {
// this will be called on change of value
}
}
Further to set the value and update the DOM simply update startDate and/or endDate variables and DOM will update accordingly.
You need to work with your model and not fiddle with the bound DOM element. You have bound the elements to viewmodel items:
<input type="text" name="updateStartDate" v-model="updateDateRange.start">
<input type="text" name="updateEndDate" v-model="updateDateRange.end">
then you use jQuery to set the field values
$('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY'));
$('input[name="updateEndDate"]').val(end.format('MM/DD/YYYY'));
but you should be setting the bound values instead:
updateDateRange.start = start.format('MM/DD/YYYY');
updateDateRange.end = end.format('MM/DD/YYYY');