Javascript Vue.js完整日历日期单击
我试图使用vue.js从fullCalendar的onDateClick函数返回一个日期值，并将数据传递给一个道具，然后通过laravel存储在后端。我能想到的每一种方法都会带来各种未定义的错误。我可以让模态弹出插入它只是从来没有返回一个值，我可以看到。我不知道如何将onclick转换成道具。我已经尝试了几十种组合。这里没有任何东西是有效的，只是一些代码Javascript Vue.js完整日历日期单击,javascript,vue.js,fullcalendar,Javascript,Vue.js,Fullcalendar,我试图使用vue.js从fullCalendar的onDateClick函数返回一个日期值，并将数据传递给一个道具，然后通过laravel存储在后端。我能想到的每一种方法都会带来各种未定义的错误。我可以让模态弹出插入它只是从来没有返回一个值，我可以看到。我不知道如何将onclick转换成道具。我已经尝试了几十种组合。这里没有任何东西是有效的，只是一些代码 import { Table, TableColumn, Select, Option } from 'element-ui'; import
import { Table, TableColumn, Select, Option } from 'element-ui';
import FullCalendar from '@fullcalendar/vue';
import dayGridPlugin from '@fullcalendar/daygrid';
import Modal from '@/components/Modal'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import BaseInput from '@/components/Inputs/BaseInput'
import flatPicker from 'vue-flatpickr-component';
import 'flatpickr/dist/flatpickr.css';
import DropzoneFileUpload from '@/components/Inputs/DropzoneFileUpload';
const today = new Date();
const y = today.getFullYear();
const m = today.getMonth();
const d = today.getDate();
export default {
name: 'CalendarForm',
components: {
FullCalendar,
Modal,
BaseInput,
flatPicker,
DropzoneFileUpload,
[TableColumn.name]: TableColumn,
[Table.name]: Table,
},
data(){
let yearAndMonth = `${y}-${m + 1}`
return {
calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
formData: new FormData(),
tableData: [],
deleteNotice: false,
deleteId: false,
canAdd: false,
canDelete: false,
events: {
type: 'POST',
url: 'calendar/show',
failure: function(response) {
console.log(response);
},
},
header: {
left: 'title',
center: false,
right: 'prev, next today',
},
showAddModal: false,
showEditModal: false,
model: {
name: null,
className: 'bg-default',
description: null,
start: '',
end: '',
files: [],
},
eventColors: ['bg-info', 'bg-orange', 'bg-red', 'bg-green', 'bg-default', 'bg-blue', 'bg-purple', 'bg-yellow']
};
},
methods: {
created() {
this.init();
},
init() {
window.axios.post('calendar/show')
.then((response) => {
this.tableData = response.data.events.data;
this.canAdd = response.data.can_add;
this.canDelete = response.data.can_delete;
});
},
calendarApi() {
return this.$refs.fullCalendar.getApi()
},
changeView(viewType) {
this.defaultView = viewType
this.calendarApi().changeView(viewType)
},
next() {
this.calendarApi().next()
},
prev() {
this.calendarApi().prev()
},
onDateClick({ date }) {
this.showAddModal = true
this.model.start = date
this.model.end = date
},
save() {
this.formData.append('name', this.model.name);
this.formData.append('date', this.onDateClick(date));
this.formData.append('description', this.model.description);
for (var i = 0; i < this.model.files.length; i++) {
const file = this.model.files[i];
this.formData.append('files[' + i + ']', file);
}
window.axios.post(window.location.origin + '/calendar/store',
this.formData,
{
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((response) => {
this.init();
}).catch((err) => {
console.log(err);
});
},
previewFiles(val) {
this.model.files.push(val);
},
confirmDelete(id) {
this.deleteNotice = true;
this.deleteId = id;
},
handleDelete() {
window.axios.post('calendar/destroy', { id: this.deleteId })
.then((response) => {
this.deleteNotice = false;
this.deleteId = false;
this.init();
});
},
},
};
</script>```
import{Table，TableColumn，Select，Option}来自'element ui'；
从“@FullCalendar/vue”导入FullCalendar；
从“@fullcalendar/daygrid”导入dayGridPlugin；
从“@/components/Modal”导入模态
从“@fullcalendar/timegrid”导入timeGridPlugin
从“@fullcalendar/interaction”导入interactionPlugin
从“@/components/Inputs/BaseInput”导入BaseInput
从“vue flatPicker组件”导入flatPicker；
导入'flatpickr/dist/flatpickr.css'；
从“@/components/Inputs/DropzoneFileUpload”导入DropzoneFileUpload；
const today=新日期（）；
const y=today.getFullYear（）；
const m=today.getMonth（）；
const d=today.getDate（）；
导出默认值{
名称：'CalendarForm'，
组成部分：{
全日历，
情态动词
基本输入，
flatPicker，
DropzoneFileUpload，
[TableColumn.name]：TableColumn，
[表.名称]：表，
},
数据（）{
设yearAndMonth=`${y}-${m+1}`
返回{
calendarPlugins:[dayGridPlugin，timeGridPlugin，interactionPlugin]，
formData:new formData（），
tableData:[]，
删除通知：错误，
deleteId:false，
卡纳德：错，
坎德莱特：错，
活动：{
键入：“POST”，
url:“日历/显示”，
故障：功能（响应）{
控制台日志（响应）；
},
},
标题：{
左：'标题'，
中锋：错，
右：'上一个，下一个今天'，
},
showAddModal:false，
showEditModal:false，
型号：{
名称：空，
类名：“bg默认值”，
description:null，
开始：“”，
结束：“”，
文件：[]，
},
事件颜色：['bg-info'，'bg橙色'，'bg红色'，'bg绿色'，'bg默认值'，'bg蓝色'，'bg紫色'，'bg黄色']
};
},
方法：{
创建（）{
this.init（）；
},
init（）{
window.axios.post（'日历/显示'）
。然后（（响应）=>{
this.tableData=response.data.events.data；
this.canAdd=response.data.can\u add；
this.canDelete=response.data.can_delete；
});
},
calendarApi（）{
返回此值。$refs.fullCalendar.getApi（）
},
更改视图（视图类型）{
this.defaultView=viewType
this.calendarApi（）.changeView（viewType）
},
下一个（）{
this.calendarApi（）.next（）
},
prev（）{
this.calendarApi（）.prev（）
},
onDateClick（{date}）{
this.showAddModal=true
this.model.start=日期
this.model.end=日期
},
保存（）{
this.formData.append（'name'，this.model.name）；
this.formData.append（'date'，this.onDateClick（date））；
this.formData.append（'description'，this.model.description）；
对于（var i=0；i{
this.init（）；
}).catch（（错误）=>{
控制台日志（err）；
});
},
预览文件（val）{
this.model.files.push（val）；
},
确认删除（id）{
this.deleteNotice=true；
this.deleteId=id；
},
handleDelete（）{
window.axios.post（'calendar/destroy'，{id:this.deleteId}）
。然后（（响应）=>{
this.deleteNotice=false；
this.deleteId=false；
this.init（）；
});
},
},
};
```
onDateClick功能正常，将完整日历返回的日期保存到此.model中应该可以正常工作（此时应添加一个console.log以验证日期是否正常）。 您应该会收到一个javascript普通日期。它没有格式化 在
save（）另一方面，由于我是作者，因此值得一看没有依赖关系的Vue.js完整日历。
您可能会发现这更适合Vue项目，并且更易于使用。这不是一个Vue包装，而是一个完整的Vue.js库。您是否将此onDateClick放在@dateClick事件中？它应该是那样的，这样你就可以知道日期了。事实上，我整个下午都在忙这个，我终于让它通过了一个日期，但格式是2019年10月25日星期五00:00:00 GM，无法使用，我需要找到一种方法将其转换为2019-10-25格式。任何帮助都将不胜感激。这里有一个链接到另一个问题，我刚刚问过张贴以供澄清[您没有在提供的代码中添加组件的
window.moment=require时（'moment'）；从'moment'导入矩moment("your date").format('YYYY-MM-DD')