logo
down
shadow

Vuetify make date picker required and do not allow text input


Vuetify make date picker required and do not allow text input

Content Index :

Vuetify make date picker required and do not allow text input
Tag : html , By : Sebastián Ucedo
Date : November 28 2020, 12:01 PM

I wish this helpful for you I'm using vuetify to do a date picker for a user's birthday. I want the date picker to be required in my form and to accept date values only. Here is what I have tried: , Just add the rules to v-text-field, and I think it will work already
<v-menu v-model="datemenu">
  <template v-slot:activator="{on}">
    <v-text-field
      v-model="date"
      v-on="on"
      label="Something"
      :rules="[v => v!! || 'Required']"
    ></v-text-field>
  </template>
  <v-date-picker v-model="date" @input></v-date-picker>
</v-menu>

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

date picker and timer picker in one input text


Tag : jquery-ui , By : Mahyar Sepehr
Date : March 29 2020, 07:55 AM
seems to work fine I don't see time picker in your code.
FYI: default jQuery date picker doesn't allow time picker, for that you need another plugin along with jQuery.

Vuetify: How to fix v-date-picker not showing the chosen date in the text-field


Tag : date , By : user87752
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I'm creating a form with vue.js / vuetify 2, one of the field is Date Event, so I used v-date-picker for the user to choose the date. The problems are the following: , Try this:
<template>
<v-menu
    v-model="showPicker"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    full-width
    max-width="290px"
    min-width="290px"
>
    <template v-slot:activator="{ on }">
        <v-text-field
            v-model="selectedDate"
            label="Choose the date"
            hint="YYYY/MM/DD"
            persistent-hint
            readonly
            v-on="on"
        ></v-text-field>
    </template>
    <v-date-picker
        v-model="selectedDate"
        no-title
        @input="showPicker = false"
    ></v-date-picker>
</v-menu>
</template>

<script>
export default {
    data: () => ({
        showPicker: false,
        selectedDate: null,
    })
</script>

How to input date and time in a Vuetify text input field


Tag : javascript , By : bjorngylling
Date : March 29 2020, 07:55 AM
it should still fix some issue There are Vuetify components for picking a date and time, but no combined one.
There is a basic html component you could check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

Custom date picker in Vuetify


Tag : javascript , By : Alecsandru Soare
Date : March 29 2020, 07:55 AM
Any of those help Changes i've made to get it to work, is that i've added a computed with a get() and set(). The getter will return the current selected value, and the setter will be emitting the new value each time it's changing.
This is a good way of utilizing the v-model within custom components.
<template>
  <v-container fill-height>
    <v-row justify="center" align="center">
      <v-col cols="12">
        <!-- Date picker -->
        <v-menu
          ref="menu1"
          v-model="menu1"
          :close-on-content-click="false"
          transition="scale-transition"
          offset-y
        >
          <template v-slot:activator="{ on }">
            <v-text-field
              v-model="selected"
              v-on:input="$emit('input', $event)"
              @blur="date = parseDate(value)"
              v-on="on"
              value
              label="Date"
              color="green lighten-1"
            />
          </template>
          <v-date-picker
            v-model="selected"
            @input="menu1 = false"
            no-title
            header-color="green lighten-1"
            color="green lighten-1"
          />
        </v-menu>
        <!-- end of date picker -->
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
  export default {
    name: 'CustomDatePicker',
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        menu1: null,
        date: null
      }
    },

    computed: {
      selected: {
        get() {
          return this.value
        },
        set(value) {
          this.$emit('input', value)
        }
      },
      computedDateFormatted () {
        return this.formatDate(this.date)
      }
    },

    watch: {
      date (val) {
        this.value = this.formatDate(this.date)
      }
    },
    methods: {
      formatDate (date) {
        if (!date) { return null }
        return date
      },
      parseDate (date) {
        if (!date) { return null }

        const [year, month, day] = date.split('-')
        return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
      }
    }
  }
</script>

Make Vuetify v-text-field component required by default


Tag : vue.js , By : algoRhythm99
Date : March 29 2020, 07:55 AM
hop of those help? You could do the following:
Create a v-form and place your textfields inside the form. Don't forget to give your v-form a v-model and a ref too.
<v-form v-model="formValid" ref="myForm">
    <v-text-field label="Field 1" :rules="rules.required"></v-text-field>
    <v-text-field label="Field 2" :rules="rules.required"></v-text-field>
</v-form>


<script>
export default {
  data() {
    return {
      formValid: false,
      rules: {
       required: [value => !!value || "Required."]
      }
    };
  },
  mounted() {
   this.$refs.myForm.validate();
 }
};
</script>
Related Posts Related QUESTIONS :
  • Technical reasons for not having large background images in websites
  • HTML 5 Structure tags demo
  • Angular - String interpolation of undefined variable
  • Is there any way to edit specific Column of table using mat-table in Angular material
  • How can I set a text as a shadow for a heading element?
  • How to fix the forms making the buttons overlap
  • Splitting XML into multiple HTML pages with XSLT?
  • How to justify empty divs in flex container
  • How to blur in CSS only one layer of when you have multiple layers in background-image?
  • Scrollable html table with fixed first row and first column, along with angular material controls within the cells of ta
  • In Django, how to extract ID attribute from html Input tag, WITHOUT using django forms
  • how to fix link tag in html after changing css
  • How do I add a top padding to the second row?
  • Is it possible to split XML into multiple HTML pages with page navigation?
  • AngularJS: responsive height in bootstrap
  • Hide second line of text with CSS
  • repeating-linear-gradient not working in Edge browser and internet Explorer Browser
  • how to make search and form category merges like amazon on bootstrap
  • Bootstrap: Rearranging rows into columns and changing the order of elements
  • How can I move a label under a text box?
  • How save LinearGradient To database
  • How to reposition an image with a linear gradient using css?
  • HTML audio will not play when page opened by batch file
  • CSS Three Tone Diagonal Background
  • How to use slots inside of template components in HTML
  • Using span tags in meta description & title, for dual languages
  • How to make an icon/span selectable by pressing Tab key?
  • Add dynamic margins using UI Kit
  • Add margin-top to textbox
  • What is the correct semantic HTML markup for a title (book, movie, etc.), according to the spec? Is it an <em> tag
  • How to make an animation in Geoserver or in Leaflet
  • Buttons overlapping when shrinking window
  • Stretch an element to the end of the automatically calculated grid, not just the explicit grid
  • What relation is there between Angular's <ng-content> and ShadowDOM
  • CSS background for div element is not working
  • CSS Marquee: multiple paragraphs overlaps
  • I want to align search bar to extreme right
  • Getting blank white space to the left of content inside pre tags
  • My viewer.html won't load any css and jss files
  • How to apply multiple styles to HTML to only part of a title?
  • Want to make text div transparent on a parallax area
  • Is there a way to make this ID plus descendants CSS rule less specific?
  • Is there a way to drop in a stylesheet to get a Material theme or similar for all form elements on the page?
  • How do I make a sideways L look in html/css?
  • Why won't the color #e67d22e1 display in Safari?
  • How to select specific tag's attribute value with xPath?
  • How to make div rows fill available height
  • How to fix text inside a block that grows
  • svg hexagon halftone pattern
  • How to edit a website's element's background colors using a chromium extention
  • What is the main tag in HTML5 ? How does it differ from body tag?
  • My image is flowing out from my div column. How I can fix it and made the image full-size into div
  • How to draw line in react
  • Why Transition css is not working in child selector css
  • How to modify materialize css select option?
  • How to center some text in a rectangle in CSS?
  • How do I equally space out css grid columns?
  • How to make sure all the parts of a macro are running correctly?
  • How to adjust the zoom of website at different browser at different screen size?
  • Can't set max height on child div properly
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com