Awesome Vuetify DateTime Picker Component

by Posted on

In this post I am going to share vuejs based awesome Vuetify DateTime Picker Component . The arrangement is superbly made to appear as a work of some incredible inside designer. The run of the mill plan structure with the clock can be normally found in the landing page of various convenient customers. The designer has used a comparable thought as well. To settle on the range decision easier, the developer has given you a wide calendar that shows constant months one alongside the other.The date and time you picked places into the empty field.

Vuetify Date Time component

HTML

<div id="app">
  <v-app>
    <v-container grid-list-md>
      <v-layout column align-center>
        <v-flex>
          <h1>Output: {{ myDateTime }}</h1>
          <v-date-time v-model="myDateTime" />
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>


CSS

.v-date-time-widget-container{
    background: white;padding:15px
}
 
.v-card{
  box-shadow: none
}
 
.btn-am{
  float:left;
}
 
.btn-pm{
  float:right
}
 
.v-date-picker-table{
  height: auto;
}


JS

Vue.component('v-date-time', {
  props: ['value'],
 
  template: `
      <div>
          <v-menu
              ref="menu"
              v-model="dropdownOpen"
              :close-on-content-click="false"
              :nudge-right="40"
              :return-value.sync="model"
              lazy
              transition="scale-transition"
              offset-y
              full-width
              max-width="560px"
              min-width="560px">
              <template v-slot:activator="{ on }">
                  <v-text-field
                      v-model="displayDate"
                      label="Date Time"
                      prepend-icon="event"
                      readonly
                      v-on="on"
                  ></v-text-field>
              </template>
 
             <div class="v-date-time-widget-container">
                  <v-layout row wrap>
                      <v-flex xs12 sm6>
                          <v-date-picker 
                              v-model="dateModel"
                              width="240"
                              color="primary"></v-date-picker>
 
                      </v-flex>
                      <v-flex xs12 sm6>
                          <v-btn small 
                            fab
                            :color="getMeridiamButtonColor('AM')" 
                            class="btn-am" @click="meridiam='AM'">AM</v-btn>
 
                          <v-btn 
                                fab
                               small :color="getMeridiamButtonColor('PM')" 
                                class="btn-pm"
                                @click="meridiam='PM'">PM</v-btn>
 
                          <v-time-picker 
                              v-if="dropdownOpen" 
                              v-model="timeModel" 
                              color="primary"
                              width="240"
                              :no-title="true"></v-time-picker>
 
                          <h3 class="text-xs-center">{{ currentSelection }}</h3>
                      </v-flex>
 
                      <v-flex xs12 class="text-xs-center">
                          <v-btn flat small @click="dropdownOpen = false">Cancel</v-btn>
                          <v-btn flat small @click="confirm()">Ok</v-btn>
                      </v-flex>
                  </v-layout>
              </div>
          </v-menu>
      </div>
    `,
 
  data() {
    return {
      dropdownOpen: false,
      meridiam: 'AM',
      displayDate: '',
      dateModel: '',
      timeModel: '',
      monthNames: [
      "Jan", "Feb", "Mar",
      "Apr", "May", "June", "Jul",
      "Aug", "Sept", "Oct",
      "Nov", "Dec"] };
 
 
  },
 
  computed: {
    model: {
      get() {return this.value;},
      set(model) {} },
 
 
    currentSelection() {
      let selectedTime = this.timeModel + ' ' + this.meridiam;
      return this.formatDate(this.dateModel) + ' ' + selectedTime;
    } },
 
 
  methods: {
    formatDate(date) {
      if (!date) return '';
 
      const [year, month, day] = date.split('-');
      let monthName = this.monthNames[parseInt(month)];
      return `${monthName} ${day}, ${year}`;
    },
 
    // Confirm the datetime selection and close the popover
    confirm() {
      this.onUpdateDate();
      this.dropdownOpen = false;
    },
 
    // Format the date and trigger the input event
    onUpdateDate() {
      if (!this.dateModel || !this.timeModel) return false;
 
      let selectedTime = this.timeModel + ' ' + this.meridiam;
      this.displayDate = this.formatDate(this.dateModel) + ' ' + selectedTime;
      this.$emit('input', this.dateModel + ' ' + selectedTime);
    },
 
    // Set the active state for the meridiam buttons
    getMeridiamButtonColor(m) {
      if (m === this.meridiam) {
        return 'primary';
      } else {
        return 'darkgray';
      }
    } },
 
 
  mounted() {
    // Set the current date and time as default value
    var d = new Date();
    var currentHour = d.getHours() % 12; // AM,PM format
    var minutes = (d.getMinutes() < 10 ? '0' : '') + d.getMinutes();
    var currentTime = currentHour + ':' + minutes;
    this.timeModel = currentTime;
    this.dateModel = d.toISOString().substr(0, 10);
 
    if (d.getHours() >= 12) {
      this.meridiam = 'PM';
    }
  } });
 
 
const vm = new Vue({
  el: "#app",
  data() {
    return {
      myDateTime: 'Select a Date' };
 
  } });

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by xristian. Visit their official repository for more information and follow for future updates.

Published by admin