Как получить значение даты el-date-picker и передать его в django view.py

  1. How to get the el-date-picker date value and pass it to django view.py. pickup_date = request.POST.get() is not working

  2. how to make el-date-picker a required field that force user to select a date when filling the form

html:

<!DOCTYPE html>
<html lang="en">

<head>
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>

</style>

<body>
  <form>
  <div id='app'>
    <el-date-picker v-model="value" type="date" placeholder="select date" value-format="yyyy-MM-dd"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
  <button type="submit">submit</button>
  </form>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var Vue = new Vue({
    el: '#app',
    data: {
      value:'',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now()
        }
      },
    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
  })
</script>

</html>

Попробуйте переместить вашу форму внутрь <div id='app'>, тогда вы сможете предотвратить отправку формы и включить/выключить кнопку:

<head>
  <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>

</style>

<body>
  <div id='app'>
    <form @submit.prevent>
      <el-date-picker v-model="value" type="date" placeholder="select date" value-format="yyyy-MM-dd"
        :picker-options="pickerOptions">
      </el-date-picker>
      <button type="submit" @click="submitForm" :disabled="!value">submit</button>
    </form>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  var Vue = new Vue({
    el: '#app',
    data: {
      value: '',
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now()
        }
      },
    },
    methods: {
      submitForm() {
        if (this.value) {
          console.log('submit', this.value)
        }
      }
    }
  })
</script>

Вернуться на верх