Create a field with a simple date picker in Vue

Do not reinvent the wheel to create your own date picker component. Just use one of the existing components and praise those developers who share great things.

I have historically struggled with date pickers and had finally settled in on a good date picker for Vuetify. Since most of my Vue projects are standardized on Materialize, that posed no issues.

However, if I need to create something outside of Vuetify, the available options suddenly explode to my utter delight. I have not really dug deep - but the aptly named ‘vuejs-datepicker’ checks all the boxes.

Code below -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<!DOCTYPE html>
<html>
  <head>
    <title>Test Date Picker</title>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vuejs-datepicker"></script>
  </head>
  <body>
    <div id="app">
      <vuejs-datepicker></vuejs-datepicker>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: "#app",
        data: {
          testDt: ""
        },
        components: {
          vuejsDatepicker
        }
      });
    </script>
  </body>
</html>

See the above code in action -

vue-date-picker-example

Create a field with a simple date picker in Vue

See Also