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 });
}
Related
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;
}
I'm trying to wire a calendar and need the variable firstDayCurrentmonth on the OUTSIDE of the function to make the days work. If it's on the inside, it advances like it's supposed to. If it's on the outside, it goes to Aug 2022 every time the button is activated (not updating currentMonth). It also isn't changing the days of the month which is connected I'm sure, but I can't get past the first problem. I'm guessing it has something to do with passing a parsed date, but I'm pulling my hair out...
Trying to convert this youTube https://www.youtube.com/watch?v=9ySmMd5Cjc0&t=747s to Vuejs. Any help is appreciated!
I tried to make a fiddle/sandbox but not sure how to use date-fns with them.
<template>
<div>
<button #click="lastMonth" >Previous</button>
<h1 >{{currentMonth }}</h1>
<button #click="nextMonth" >Next</button>
</div>
<div v-for="day in days">
<button>{{format(day, 'd')}}</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useState } from '../state/state.js'
import { format, startOfToday, add, parse, eachDayOfInterval, startOfMonth, endOfWeek, endOfMonth } from 'date-fns'
let today = startOfToday()
let [currentMonth, setCurrentMonth] = useState(format(today, 'MMM-yyyy'))
let firstDayCurrentMonth = ref(parse(currentMonth.value, 'MMM-yyyy', new Date()))
let days = eachDayOfInterval({
start: startOfMonth(firstDayCurrentMonth.value),
end: endOfWeek(endOfMonth(firstDayCurrentMonth.value)),
})
console.log(days)
const nextMonth = () => {
// let firstDayCurrentMonth = parse(currentMonth.value, 'MMM-yyyy', new Date())
let firstDayNextMonth = add(firstDayCurrentMonth.value, {months: 1})
//adding .value if on outside - remove it if inside
setCurrentMonth(format(firstDayNextMonth, 'MMM-yyyy'))
console.log('fdcm inside', currentMonth)
}
</script>
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 need a bootstrap datepicker where the start date and enddate must be customizable like start date is 01-01-1950 and end date is todate-18 years. Secondly wanted to show the dropdown year and month on the calendar topbar to use easily rather than the default bootstrap calendar.
For your reference have attached an image which 'm using now without bootstrap.
Any idea/link is appreciated.
you can not put dropdown but can achieve same functionality by another way with new bootstrap version.
check out this link http://www.malot.fr/bootstrap-datetimepicker/
<script>
$(document).ready(function() {
$('#date_deb').daterangepicker({locale: {format: 'DD/MM/YYYY'},
showDropdowns: true,
minDate: '01/01/2016',
singleDatePicker: true,
singleClasses: "picker_2"
}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>