Vue Js Input Mask for Date: Vue.js is the ability to apply input masks to form fields, including date inputs.An input mask is a pattern of characters that specifies the format in which data should be entered into a form field. In the case of date inputs, an input mask can be used to guide users to enter dates in a specific format, such as dd/mm/yyyy or dd-mm-yyyy.
How do I create a date mask in the DD/MM/YYYY format using Vue.js?
This code is a simple Vue.js application that renders an input field for entering a date in the format of “dd/mm/yyyy”. As the user types into the input field, the onDateInput
method is called to clean and format the input.
The cleanedInput
variable removes any non-numeric characters from the input using a regular expression. The if/else statements format the input based on its length, adding the ‘/’ characters in the appropriate positions to create the “dd/mm/yyyy” format.
The Vue.js createApp
method creates a new application instance, and the data
method defines the application’s data properties. In this case, the only data property is date
, which is initially set to an empty string.
The methods
property defines a method called onDateInput
, which is called whenever the user types into the input field. This method updates the date
data property to the cleaned and formatted input.
Finally, the app.mount
method mounts the Vue.js application to the element with an id of “app” in the HTML code.
Vue Js Date Mask DD/MM/YYYY Format
<div id="app">
<input type="text" v-model="date" @input="onDateInput" placeholder="dd/mm/yyyy" />
</div>
<script type="module">
const app = Vue.createApp({
data() {
return {
date: '',
}
},
methods: {
onDateInput(event) {
// Remove non-numeric characters from the input
const cleanedInput = event.target.value.replace(/\D/g, '');
// Format the input as a date (DD/MM/YYYY)
if (cleanedInput.length <= 2) {
this.date = cleanedInput;
} else if (cleanedInput.length <= 4) {
this.date = cleanedInput.slice(0, 2) + '/' + cleanedInput.slice(2);
} else {
this.date = cleanedInput.slice(0, 2) + '/' + cleanedInput.slice(2, 4) + '/' + cleanedInput.slice(4, 8);
}
},
}
});
app.mount('#app');
</script>
Outpu of above example
![](https://danatec.vn/wp-content/uploads/2024/07/3-11.webp)
In Vue.js, a date mask is a technique for enforcing a specific format on user input for dates, in this case, DD-MM-YYYY. It typically involves specifying a pattern or regular expression that matches the desired format, and applying it to an input field using a library or component. This can help to improve the user experience by providing a clear format for input, and also reduce errors by ensuring that dates are entered correctly.
Vue Js Date Mask DD-MM-YYYY Format
methods: {
onDateInput(event) {
// Remove non-numeric characters from the input
const cleanedInput = event.target.value.replace(/\D/g, '');
// Format the input as a date (DD-MM-YYYY)
if (cleanedInput.length <= 2) {
this.date = cleanedInput;
} else if (cleanedInput.length <= 4) {
this.date = cleanedInput.slice(0, 2) + '-' + cleanedInput.slice(2);
} else {
this.date = cleanedInput.slice(0, 2) + '-' + cleanedInput.slice(2, 4) + '-' + cleanedInput.slice(4, 8);
}
},
}