I am using Vue2 Date Range Picker. When I try and pick a date range I either click a start and and end date or I select one of the ranges. In either case it shows the desired input in the fields, however when I click apply the end date changes to another date.
For example, I might click on the last quarter range and it displays 01-04-2022 → 30-06-2022, which is what I want. However when I click apply, it changes to 01-04-2022 → 30-01-2023. I have been pulling my hair out trying to figure out why.
I have the following configuration.
<date-range-picker
v-model="dateRange"
:controlContainerClass="'form-input'"
:locale-data="locale"
:ranges="ranges"
class="picker"
/>
dateRange: {
startDate: null,
endDate: null,
},
ranges: {
'Today': [today, today],
'Yesterday': [yesterday, yesterday],
'This Week': [start_of_week, today],
'Last Week': [start_of_last_week, end_of_last_week],
'This month': [start_of_month, end_of_month],
'Last month': [start_of_last_month, end_of_last_month],
'This Quarter': [start_of_quarter, end_of_quarter],
'Last Quarter': [start_of_last_quarter, end_of_last_quarter],
'This year': [start_of_year, end_of_year],
},
locale: {
direction: 'ltr',
format: 'dd-mm-yyyy',
separator: ' → ',
applyLabel: 'APPLY',
cancelLabel: 'Cancel',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: 1,
autoApply: true,
},
Related
I have a field that shows the current date and next to that is a counter where you can add one month to the current date. This was as intended, because I always want the current date to be the default one. But I would also like to allow my users to pick a different date and then count the months from that selected date. They can't do this right now. if they select a date and add one month, the date will automatically update to be todays date + 1 month.
How can I change this so that the default date is still the current date, while allowing users to select a different date and add one month to THAT date.
Eg. if today is 15/11/2022 and the user picks the 17th and adds one month, I would like the date to change to to 17/12/2022. Right now it will only change to 15/12/2022 even if the user enters the 17th.
<template>
<date-picker v-model="startDate" format="DD/MM/YYYY"/>
<b-form-spinbutton v-model="counter" min="0"/>
</template>
<script>
export default {
data() {
return {
counter: 0,
startDate: moment(new Date()).format('YYYY-MM-DD')
}
},
methods: {
populateDateAccordingly() {
this.startDate = moment().format('YYYY-MM-DD');
this.startDate = moment().add(this.counter, 'M').format('YYYY-MM-DD');
}
},
watch: {
counter : 'populateDateAccordingly'
},
}
}
</script>
I am working on VUE project where i can add range date event.
Example
const eventList = [{
status: "Pending",
title: "title",
start: "2022-10-19",
end: "2022-10-21",
// startTime: '10:00',
// endTime: '12:00',
}]
now what is want to also add time range for every event so that time range can be visible in week page and it should look like
The closest thing to what you've shown in your question is a simple recurring event.
For example:
{
status: "Pending",
title: "title",
startRecur: "2022-10-19",
endRecur: "2022-10-21",
startTime: '10:00',
endTime: '12:00',
}
This will create a series of events occurring between the times specified in startTime and endTime, which will show on every day between startRecur and endRecur (the end date being exclusive). See the documentation link above for more details and options.
Demo: https://codepen.io/ADyson82/pen/ExLBbNO
I'm using a table component for Vuejs called vue-good-table.
It allows you to format your columns with different formats like string, number and date.
My issue today is related to the date formatting. I'm being able to format the column properly, however, some of the values that come from the database are null, and then it appears a label Invalid Date for those rows that have null dates.
Is there a way to configure those columns as nullable or format them in a way that I prevent this message to be shown? I'd rather leave the table cell empty instead of displaying that label.
The following example shows the scenario that I'm describing
<template>
<vue-good-table
:columns="columns"
:globalSearch="true"
:paginate="true"
:rows="rows">
</vue-good-table>
</template>
<script>
export default {
name: 'Table',
computed: {
columns() {
return [{
field:"fieldA",
label:"fieldA",
type:"number"
},{
field:"fieldB",
label:"fieldB",
type:"date",
inputFormat: 'YYYY/MM/DD',
outputFormat: 'YYYY/MM/DD'
}];
}
},
rows() {
return [{
fieldA: 1,
fieldB: null
},{
fieldA: 1,
fieldB: '2017/01/04'
}];
}
}
</script>
In that case, I would have one field with the date formatted correctly, and another field with a label Invalid Date
Thanks
-- UPDATED --
This problem was fixed in most recent versions.
Edit: I have just realized the formatFn function overrides the input and output format options, since it will only use the function to format the data. Not sure if it's the best aproach, but instead you should probably format the data yourself on the function (or format the data before passing to the table). Here's an example using moment:
{
label: 'Date/Time',
field: 'date',
type: 'date',
formatFn: function (value) {
return value != null ? moment(value, 'DD/MM/YYYY HH:mm:ss').format('DD-MM-YYYY HH:mm:ss') : null
}
}
I had the same issue and I was able to format the data using the formatFn function (https://github.com/xaksis/vue-good-table#formatfn-function).
{
label: 'Date/Time',
field: 'date',
type: 'date',
dateInputFormat: 'DD/MM/YYYY HH:mm:ss',
dateOutputFormat: 'DD-MM-YYYY HH:mm:ss',
formatFn: function (value) {
return value != null ? value : null
}
}
Hope this helps
Recently I have upgrade my Ext version from 4.0.7 to 4.1.1
In my model I have defined like
{name : 'StartDate',type: 'date' ,dateFormat: 'time'},
My Grid Column is
{
id: 'StartDateID',
width: 180,
text: 'Start Date',
dataIndex: 'StartDate',
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
editor:{
allowBlank: true,
xtype:'datefield',
format:'m/d/Y',
editable: true},
sortable: false, groupable: false }
On Edit I am doing
My_Grid.on('edit', function(editor, e) {
e.store.sync();
}
After clicking on Update I used to get [with Ext 4.0.7 ] date value as
2012-08-04T00:00:00
but after upgrade with 4.1.1 I am getting date value as
310008e
Which I am not understanding.
My date is in this format
1346351400000
Can you please suggest me what is missing here? Or else how to get proper date after clicking update button from RowEditor.
Your model definition is incorrect, if you want your desired format it should be like:
{name : 'StartDate',type: 'date' ,dateFormat: 'U'},
'time' is not in the documentation, the only reason you could actually be using 'time' is if it is a custom type you have created, which is probably not the case.
I have the following date picker
{
xtype: 'datefield',
id: 'FinalDespatchDate',
name: 'FinalDespatchDate',
fieldLabel: 'Part Despatch Date',
labelWidth: 150,
width: 370,
validateOnChange: false,
format: 'd/m/Y'
},
In my model i have
{
mapping:'FinalDespatchDate',
name:'FinalDespatchDate',
type: 'date',
dateFormat:'d/m/Y'
},
if in my model i don't include the dateFormat. The date binds to my date picker but it sends the date in an incorrect format. When i add dateFormat it sends the date in the correct format it just no longer binds to the datepicker. ie the above configuration display nothing in the date picker
Does your data come from server with properly formatted date value ('d/m/Y') in this (non-working) configuration?