Phone Number Mask
Credit Card Mask
Expiry Date Mask
Currency Format
SSN Mask
Credit Card Input
Phone Number Input
IP Address Input
Currency Input
SSN/National ID Input
Date & Time Input
{
let v = dateTime.replace(/\D/g,'').slice(0,12);
const y = v.slice(0,4);
let m = v.slice(4,6);
let d = v.slice(6,8);
let h = v.slice(8,10);
let i = v.slice(10,12);
if (m.length===1 && +m>1) m = '0'+m;
if (m.length===2) { let mm=+m; mm=Math.min(12, Math.max(1, mm)); m=String(mm).padStart(2,'0'); }
if (d.length===1 && +d>3) d = '0'+d;
if (d.length===2) {
let maxD = 31;
if (y.length===4 && m.length===2) {
maxD = new Date(+y, +m, 0).getDate();
}
let dd=+d; dd=Math.min(maxD, Math.max(1, dd)); d=String(dd).padStart(2,'0');
}
if (h.length===1 && +h>2) h='0'+h;
if (h.length===2) { let hh=+h; if (hh>23) hh=23; h=String(hh).padStart(2,'0'); }
if (i.length===1 && +i>5) i='0'+i;
if (i.length===2) { let ii=+i; if (ii>59) ii=59; i=String(ii).padStart(2,'0'); }
let out = '';
if (y) out += y;
if (m) out += '-' + m;
if (d) out += '-' + d;
if (h) out += ' ' + h;
if (i) out += ':' + i;
dateTime = out.slice(0,16);
})()
"
class="mt-1 block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
Currency Input with Toggle
Format:
$
USD
Try entering numbers to see the formatting
Credit Card Input
International Phone Input
Date/Time Picker
Date:
Time:
DateTime:
IP Address Input
{
const num = parseInt(part);
return !isNaN(num) && num >= 0 && num <= 255;
});
" placeholder="000.000.000.000"
class="w-full pl-10 pr-4 py-2 border rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
:class="isValid ? 'border-gray-300' : 'border-red-500'">
Please enter a valid IP address (0-255 in each segment)
Color Picker
Click to elect of enter code e.g #000
Click a color or enter a custom hex value
This is a preview of your selected color
English
Spanish
French
German
Italian
Russian