This page looks best with JavaScript enabled

Create a field with a simple date picker in Vue

 ·   ·  ☕ 1 min read

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

Stay in touch!
Share on

Prashanth Krishnamurthy
WRITTEN BY
Prashanth Krishnamurthy
Technologist | Creator of Things


What's on this Page