前言

封装vuetifyjs的日期时间组件

Untitled

截图 2022-11-19 14.54.34.png

<v-row>
  <v-col
    cols="12"
    sm="2"
    md="2"
  >
    <v-menu
      ref="date_menu"
      v-model="show_date_menu"
      :close-on-content-click="false"
      :return-value.sync="date"
      transition="scale-transition"
      offset-y
      min-width="auto"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="date"
          label="选择日期"
          prepend-icon="mdi-calendar"
          readonly
          v-bind="attrs"
          v-on="on"
        />
      </template>
      <v-date-picker
        v-model="date"
        no-title
        locale="zh-cn"
        :first-day-of-week="0"
        scrollable
      >
        <v-spacer />
        <v-btn
          text
          color="primary"
          @click="show_date_menu = false"
        >
          取消
        </v-btn>
        <v-btn
          text
          color="primary"
          @click="$refs.date_menu.save(date)"
        >
          确定
        </v-btn>
      </v-date-picker>
    </v-menu>
  </v-col>
  <v-col
    cols="12"
    sm="2"
    md="2"
  >
    <v-menu
      ref="time_menu"
      v-model="show_time_menu"
      :close-on-content-click="false"
      :nudge-right="40"
      :return-value.sync="time"
      transition="scale-transition"
      offset-y
      max-width="290px"
      min-width="290px"
    >
      <template v-slot:activator="{ on, attrs }">
        <v-text-field
          v-model="time"
          label="选择时间"
          prepend-icon="mdi-clock-time-four-outline"
          readonly
          v-bind="attrs"
          v-on="on"
        />
      </template>
      <v-time-picker
        v-if="show_time_menu"
        v-model="time"
        scrollable
        full-width
        format="24hr"
        @click:minute="$refs.time_menu.save(time)"
      />
    </v-menu>
  </v-col>
  <v-spacer />
  <v-col
    cols="11"
    sm="5"
  />
</v-row>
show_date_menu: false,
show_time_menu: false,
date: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),
time: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(11, 5),
schedules = new Date((new Date(this.date + ' ' + this.time) - (new Date()).getTimezoneOffset() * 60000)).toISOString().replace('Z', '000+08:00')

后端实现

schedules = models.DateTimeField(verbose_name="定时任务")
queryset = self.task_queryset.filter(user=request.user, status=0, node_uuid__has_key=node_uuid,schedules__lte=timezone.now())[:5]

效果

截图 2022-11-19 15.08.04.png

Untitled

截图 2022-11-19 14.54.51.png

Powered by Kali-Team