javascript - 如何使用 Javascript 将输入值格式化为 DD/MM/YYYY
问题描述
我有一个输入,用户可以在其中输入日期,并且在输入时我想将其值格式化为DD/MM/YYYY
. 因此,当输入值与所需格式匹配时,我想限制用户输入。
<template>
<input v-model="dob" @input="handleInput">
</template>
<script>
export default {
data() {
return {
dob: ""
};
},
methods: {
handleInput(e) {
let value = e.target.value;
this.dob = this.$options.filters.formatTo(value, "date");
}
}
};
</script>
这是我试过的过滤器,
Vue.filter('formatTo', function(value, format) {
const formats = {
date: {
blocks: [2, 2, 4],
delimeter: '/'
}
};
if (!value || !(format in formats)) return;
const { blocks, delimeter } = formats[format];
const numberOfBlocks = blocks.length - 1;
const maxLength = numberOfBlocks + blocks.reduce((a, b) => a + b, 0);
let index = -1;
value = value.toString().split('');
blocks.map(block => {
index += block + 1; // here +1 is for delimeter
value.splice(index, 0, delimeter);
});
// remove excess values
value.length = value.length > maxLength ? maxLength : value.length;
return value.join('').trim();
});
解决方案
在这里,我根据字符串的长度创建一个掩码。当长度达到 2 时,/
应用第一个,当它达到 4 时,/
应用第二个。然后,您需要将输入限制为 8 个字符。
const createMask = string => {
const length = string.length;
const regex = /(\d{0,2})(\d{0,2})(\d{0,4})/;
if(length < 2){
return string;
}
if(length <= 3){
return string.replace(regex, "$1\/$2");
}
return string.replace(regex,"$1\/$2\/$3");
}
console.log(createMask('12241990'))
推荐阅读
- java - Value class to keep object type for later casting?
- azure - Is there a option to get the event grid trigger url + key at output value from the deployment of a Azure Function?
- node.js - How to exclude a field on save in node js
- amazon-web-services - Direct requests to a specific path based on the subdomain
- c# - Form display message when all items have been deleted from list
- c# - Error combining 'if' statements that null-checks and Pattern Matches
- r - finding each pattern ina set of sequences
- python - Numpy generate X random binary numbers with a define threshold in 1 line
- android - ArCore - 在会话上下文中创建锚点
- sql-server - 未使用表的索引碎片是否增加?