<commit_before>+++
date = "2018-04-15T10:42:42+02:00"
title = "Building a Date Input Component with Vue.js"
description = "Learn how to build a custom date input component with Vue.js including timestamp conversion and automatically focusing the correct input fields."
intro = "Today we're going to build a custom date input component powered by Vue.js. Although there is a native date input type available in all modern browsers, there are certain situations where the native date input field falls short. So let us take a look at how we can build a custom date input field with Vue.js..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue"]
+++

Today we're going to build a custom date input component powered by Vue.js. Although there is a native date input type available in all modern browsers, there are [certain situations where the native date input field falls short](http://html5doctor.com/the-woes-of-date-input/). So let us take a look at how we can build a custom date input field with Vue.js.

<div class="c-content__figure">
  <div class="c-content__broad">
    <video src="/videos/2018-04-15/vue-date-input-component.mp4" autoplay muted loop></video>
  </div>
  <p class="c-content__caption">
    <small>Custom date input field powered by Vue.js</small>
  </p>
</div>

If you want to play around with the component we will build in this article yourself, you can find a working example of [the date input component on GitHub](https://github.com/maoberlehner/building-a-date-input-component-with-vue) or you can take a look at a [demo running on Netlify](https://building-a-date-input-component-with-vue.netlify.com).

## The markup

We begin with defining the basic markup for our date input element. There are two ways of how to achieve the goal we have in mind. One possibility would be to use a single `<input>` element and use some JavaScript magic to limit the input capabilities so that it looks like a date. The second option, which is the one we will use in this article, is to use separate `<input>` elements for every portion of the date (day, month and year).

```html
<template>
  <div class="FormDate">
    <input
      class="FormDate__input FormDate__input--day"
      type="number"
      placeholder="dd">
    <span class="FormDate__divider">/</span>
    <input
      class="FormDate__input FormDate__input--month"
      type="number"
      placeholder="mm"><commit_msg>Improve phrasing<commit_after>+++
date = "2018-04-15T10:42:42+02:00"
title = "Building a Date Input Component with Vue.js"
description = "Learn how to build a custom date input component with Vue.js, including timestamp conversion and automatically focusing the correct input fields."
intro = "Today we're going to build a custom date input component powered by Vue.js. Although there is a native date input type available in all modern browsers, there are certain situations where the native date input field falls short. So let us take a look at how we can build a custom date input field with Vue.js..."
draft = false
categories = ["Development"]
tags = ["JavaScript", "Vue"]
+++

Today we're going to build a custom date input component powered by Vue.js. Although there is a native date input type available in all modern browsers, there are [certain situations where the native date input field falls short](http://html5doctor.com/the-woes-of-date-input/). So let us take a look at how we can build a custom date input field with Vue.js.

<div class="c-content__figure">
  <div class="c-content__broad">
    <video src="/videos/2018-04-15/vue-date-input-component.mp4" autoplay muted loop></video>
  </div>
  <p class="c-content__caption">
    <small>Custom date input field powered by Vue.js</small>
  </p>
</div>

If you want to play around with the component we build yourself, you can find a working example of [the date input component on GitHub](https://github.com/maoberlehner/building-a-date-input-component-with-vue), or you can take a look at a [demo running on Netlify](https://building-a-date-input-component-with-vue.netlify.com).

## The markup

We begin with defining the basic markup for our date input element. There are two ways of how to achieve the goal we have in mind. One possibility would be to use a single `<input>` element and use some JavaScript magic to limit the input capabilities so that it looks like a date. The second option, which is the one we will use in this article, is to use separate `<input>` elements for every portion of the date (day, month and year).

```html
<template>
  <div class="FormDate">
    <input
      class="FormDate__input FormDate__input--day"
      type="number"
      placeholder="dd">
    <span class="FormDate__divider">/</span>
    <input
      class="FormDate__input FormDate__input--month"
      type="number"
      placeholder="mm">
{'fraction_non_alphanumeric': 0.09192546583850932, 'fraction_numerical': 0.011594202898550725, 'mean_word_length': 4.139361702127659, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5709599', 'n_tokens_mistral': 1391, 'n_tokens_neox': 1313, 'n_words': 626}