Laravel, Vue и Momentjs Добавление дат путем получения данных в модальном окне и отправки в базу данных

Я разрабатываю веб-сайт о курице и птице, используя Laravel, vue и momentjs. У меня есть план, но я не знаю, как подать заявку на мой веб-сайт.

Это это изображение модального окна с именем cycle_modal. Модальное окно состоит из 1 выбора даты, 2 текстовых полей и 6 отключенных текстовых полей.

Это код моего модального

    <div class = "modal fade" tabindex = "-1" role = "dialog" id = "cycle_modal" aria-labelledby = "cycle_modal_label" aria-hidden = "true">
<div class = "modal-dialog modal-dialog-centered" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<h4 v-show = "editmode" class = "modal_title">Update Cycle's Info</h4>
<h4 v-show = "!editmode" class = "modal_title">Add New Cycle</h4>
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"><span
aria-hidden = "true">&times;</span></button>
</div>
<form @submit.prevent = "editmode ? updateCycle() :addCycle()">
<div class = "modal-body">
<div class = "form-group">
<label for = "names">Start date of Raising</label>
<picker-wrapper v-model = "form.date_start_raise" :isDateDisabled = "isFutureDate" name = "date_start_raise" class = "form-control" placeholder = "Select Date" :inputAttributes = "{readonly: true}" :class = "{'is-invalid': form.errors.has('date_start_raise')}"></picker-wrapper>
<has-error :form = "form" field = "date_start_raise"></has-error>
</div>
<div class = "form-group">
<label for = "names">Population</label>
<input v-model = "form.population" type = "text" name = "population" placeholder = "Chicken's Population" class = "form-control" :class = "{'is-invalid': form.errors.has('population')}">
<has-error :form = "form" field = "population"></has-error>
</div>
<div class = "form-group">
<label for = "names">Raising Days</label>
<input v-model = "form.raising_days" type = "text" name = "raising_days" placeholder = "Number of days" class = "form-control" :class = "{'is-invalid': form.errors.has('raising_days')}">
<has-error :form = "form" field = "raising_days"></has-error>
</div>
<div class = "form-group">
<label>End Date of Raising</label>
<input v-model = "form.date_end_raise" type = "text" name = "date_end_raise" placeholder = "End Date of Raising Chickens" class = "form-control" :class = "{'is-invalid': form.errors.has('date_end_raise')}" disabled>
<has-error :form = "form" field = "date_end_raise"></has-error>
</div>
<div class = "form-group">
<label> Start of Manure Collection</label>
<input v-model = "form.date_manure_collection" type = "text" name = "date_manure_collection" placeholder = "Date for Manure Collection" class = "form-control" :class = "{'is-invalid': form.errors.has('date_manure_collection')}" disabled>
<has-error :form = "form" field = "date_manure_collection"></has-error>
</div> 
<div class = "form-group">
<label> Start of Cleaning</label>
<input v-model = "form.date_cleaning" type = "text" name = "date_cleaning" placeholder = "Date for Cleaning" class = "form-control" :class = "{'is-invalid': form.errors.has('date_cleaning')}" disabled>
<has-error :form = "form" field = "date_cleaning"></has-error>
</div> 
<div class = "form-group">
<label> Start of Disinfection</label>
<input v-model = "form.date_disinfection" type = "text" name = "date_disinfection" placeholder = "Date for Disinfection" class = "form-control" :class = "{'is-invalid': form.errors.has('date_disinfection')}" disabled>
<has-error :form = "form" field = "date_disinfection"></has-error>
</div> 
<div class = "form-group">
<label> Start of Rest</label>
<input v-model = "form.date_rest_day" type = "text" name = "date_rest_day" placeholder = "Date for Rest" class = "form-control" :class = "{'is-invalid': form.errors.has('date_rest_day')}" disabled>
<has-error :form = "form" field = "date_rest_day"></has-error>
</div>
<div class = "form-group">
<label> Start of Preparation</label>
<input v-model = "form.date_preparation" type = "text" name = "date_preparation" placeholder = "Date for Preparation" class = "form-control" :class = "{'is-invalid': form.errors.has('date_preparation')}" disabled>
<has-error :form = "form" field = "date_preparation"></has-error>
</div> 
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-danger" data-dismiss = "modal">Close</button>
<button v-show = "editmode" type = "submit" class = "btn btn-primary">Update</button>
<button v-show = "!editmode" type = "submit" class = "btn btn-primary">Add</button>
</div>
</form><!-- /.form -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>

Этот код показывает содержимое скрипта

<script>
export default {
data(){
return{
editmode: false,
cycles : {},
form: new Form({
id: "",
date_start_raise: '',
population: '',
raising_days: '',
date_end_raise: '',
date_manure_collection:'',
date_cleaning: '',
date_disinfection: '',
date_rest_day: '',
date_preparation: '',
user_id:'',
})
}
},
methods:{ 
getResults(page = 1) {
axios.get('api/cycle?page=' + page)
.then(response => {
this.cycles = response.data;
});
}, 
isFutureDate(date_start_raise) {
const currentDate = new Date();
return date_start_raise > currentDate;
},
loadCycles(){
axios.get("api/cycle").then(({ data }) => (this.cycles = data ));
},
editModal(cycle){
this.editmode = true; 
this.form.reset();
$('#cycle_modal').modal('show');
this.form.fill(cycle);
},
openModal(){
this.editmode = false; 
this.form.reset();
$('#cycle_modal').modal('show');
},
updateCycle(){
this.$Progress.start();
this.form.put('api/cycle/'+this.form.id)
.then(() =>{
// success
$('#cycle_modal').modal('hide');
swal(
'Updated!',
'Information has been updated.',
'success'
)
this.$Progress.finish();
Fire.$emit('AfterCreate');
})
.catch(() =>{
this.$Progress.fail();
swal("Failed!", "There was something wrong.", "warning");
});
},
deleteCycle(id){
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {

// Send request to the server
if (result.value) {
this.form.delete('api/cycle/'+id).then(()=>{
swal(
'Deleted!',
'Your data has been deleted.',
'success'
)
Fire.$emit('AfterCreate');
}).catch(()=> {
swal("Failed!", "There was something wrong.", "warning");
});
}
})
},
addCycle(){
this.$Progress.start();
this.form.post('api/cycle')
.then(()=>{
Fire.$emit('AfterCreate'); 
$('#cycle_modal').modal('hide')
toast({
type: 'success',
title: 'New Cycle added in successfully'
})
this.$Progress.finish();
})
.catch(()=>{
this.$Progress.fail();
swal("Failed!", "There was something wrong.", "warning");
})
} 
}, 
created() {
this.loadCycles();
Fire.$on('AfterCreate',() => {
this.loadCycles();
});
}
} 
</script>

Это мой план относительно содержания моего модального окна.

Выбор даты

1. date_start_raise - Пользователь вводит дату начала выращивания цыплят

Текстовое поле

2. Население - Пользователь вводит популяцию курицы
3. Повышение_дней - Пользователь вводит количество дней, в течение которых он / она выращивает цыплят.

Текстовое поле (отключено)

4. date_end_raise- Автоматически отображает дату окончания выращивания цыплят. Уравнение этого текстового поля представляет собой сумму date_start_raise и raise_days.
   
5. date_manure_collection-Он автоматически отображает дату сбора навоза. Уравнение этого текстового поля представляет собой сумму date_end_raise и 2 дней.
6. date_cleaning-Он автоматически отображает дату очистки. Уравнение этого текстового поля представляет собой сумму date_end_raise и 9 дней
   
7. date_disinfection-Он автоматически отображает дату дезинфекции. Уравнение этого текстового поля представляет собой сумму date_end_raise и 10 дней.
8. date_rest_day-Он автоматически отображает дату отдыха. Уравнение этого текстового поля представляет собой сумму date_end_raise и 20 дней.
9. date_preparation-Он автоматически отображает дату подготовки. Уравнение этого текстового поля представляет собой сумму date_end_raise и 21 дня.

Если пользователь завершит применение своих данных, он / она отправит все данные, нажав кнопку «Добавить», и данные будут отправлены в базу данных.

Как я могу выполнить свой план для моего веб-сайта (особенно отключенные текстовые поля)?

This is my trial code using momentjs but I don’t know how to apply or it was a wrong code.

Импортировать momentjs в app.js

import moment from 'moment';

Код сценария

methods:{ 
isEndRaiseDate() {
date_end_raise = moment(date_start_raise).add(raising_days,'day');
return date_end_raise;
},
isManureCollectionDate() {
date_manure_collection = moment(date_end_raise).add(2,'day');
return date_manure_collection;
},
isCleaningDate() {
date_cleaning = moment(date_end_raise).add(9,'day');
return date_cleaning;
},
isDisinfectionDate() {
date_disinfection = moment(date_end_raise).add(10,'day');
return date_disinfection;
},
isRestDate() {
date_rest_day = moment(date_end_raise).add(20,'day');
return date_rest_day;
},
isPreparationDate() {
date_preparation = moment(date_end_raise).add(21,'day');
return date_preparation;
}
}