Hello everyone.
I’d like to make a text field where the user can only write numbers and it automatically fills the / to separate day, month and year. Like MM/DD/YYYY. Because, to be honest, the calendar date field is really terrible and many users already gave me negative feedback about it.
Thank you so much.
Were you looking for something like…
https://russian-dima.wixsite.com/my-site-3/date-converter
Of course you can expand the functionality of this eyample.
DATE-INPUT-ORDER: → Day-Month-Year
No. I want a field where just accept numbers and in a model DD/MM/YYYY. In my site im asking to the user write their Birth Date, but the Date Picker IS TERRIBLE. So im trying to make a normal text field where just accept numbers and auto-fill the / between day, month and year.
So the user will write 10 day (then a / will appear), then the user will write 05 month (then a / will appear), then the user will write 2000 year, and done. Submit form. With his birth date as 10/05/2000
@daniel_pirozzi
If you are a CODER → EVERYTHING is possible 
https://russian-dima.wixsite.com/my-site-3/date-converter
You just have to CODE it !!!
Which functions are integrated?
US -Format: —> MM/DD/YYYY
GER-Format: —> DD.MM.YYYY
Fixed some glitches —> Et VOILA !!!
@Daniel Pirozzi
I saw you have donwvoted my answer, still not the result you were looking for?
@russian-dima I just need the first box, under the convert button. How did you manage it? I dont need anything else haha
Cut out of my code the code-parts you need 
…
$w.onReady(function() {let myDate
$w('#btnConvert').onClick(()=>{console.log("Click!");
myDate = $w('#inpDate').value; console.log(myDate);
set_Date(myDate);
});
$w('#inpDate').onKeyPress(async(event)=>{let value, format
if($w('#switch1').checked) {
if($w('#switch2').checked) {format = "/"} else{format = "."}
if (event.key!=="Backspace") {
if($w('#inpDate').value.length===1) {
setTimeout(()=>{value = $w('#inpDate').value;},10);
setTimeout(()=>{$w('#inpDate').value=value+format},20);
}
if($w('#inpDate').value.length===4) {
setTimeout(()=>{value = $w('#inpDate').value;},10);
setTimeout(()=>{$w('#inpDate').value=value+format},20);
}
if($w('#inpDate').value.length===9) {
setTimeout(()=>{value = $w('#inpDate').value;},10);
setTimeout(()=>{set_Date(value)},20);
}
}
}
}); $w('#switch1').onChange(()=>{$w('#inpDate').value = "";});
$w('#inpDate').onChange(()=>{
if($w('#inpDate').value.length===10 || $w('#inpDate').value.length===0) {set_Date($w('#inpDate').value)}
});
$w('#inpDate').onMouseOut(()=>{setTimeout(()=>{$w('#inpDate').blur();},550)});
});
function set_Date(myDate) {let currentDay, currentMonth, currentFullYear;
if(myDate) {console.log("Has Value!");
if($w('#switch2').checked) {} else{let x = myDate.split("."); console.log(x);
myDate = `${x[1]}.${x[0]}.${x[2]}`; console.log("My-Converted-Date; ", myDate);
}
currentDay = Number(new Date(myDate).getDay()); console.log("Current-Day: ", currentDay);
currentMonth = Number(new Date(myDate).getMonth()); console.log("Current-Month: ", currentMonth);
currentFullYear = Number(new Date(myDate).getFullYear()); console.log("Current-Full-Year: ", currentFullYear);
if(currentMonth===0) {if($w('#switch2').checked) {$w('#inpMonth').value="January";} else{$w('#inpMonth').value="Januar";}}
if(currentMonth===1) {if($w('#switch2').checked) {$w('#inpMonth').value="February";} else{$w('#inpMonth').value="Februar";}}
if(currentMonth===2) {if($w('#switch2').checked) {$w('#inpMonth').value="March";} else{$w('#inpMonth').value="März";}}
if(currentMonth===3) {if($w('#switch2').checked) {$w('#inpMonth').value="April";} else{$w('#inpMonth').value="April";}}
if(currentMonth===4) {if($w('#switch2').checked) {$w('#inpMonth').value="May";} else{$w('#inpMonth').value="Mai";}}
if(currentMonth===5) {if($w('#switch2').checked) {$w('#inpMonth').value="June";} else{$w('#inpMonth').value="Juni";}}
if(currentMonth===6) {if($w('#switch2').checked) {$w('#inpMonth').value="July";} else{$w('#inpMonth').value="Juli";}}
if(currentMonth===7) {if($w('#switch2').checked) {$w('#inpMonth').value="August";} else{$w('#inpMonth').value="August";}}
if(currentMonth===8) {if($w('#switch2').checked) {$w('#inpMonth').value="September";} else{$w('#inpMonth').value="September";}}
if(currentMonth===9) {if($w('#switch2').checked) {$w('#inpMonth').value="October";} else{$w('#inpMonth').value="Oktober";}}
if(currentMonth===10){if($w('#switch2').checked) {$w('#inpMonth').value="November";} else{$w('#inpMonth').value="November";}}
if(currentMonth===11){if($w('#switch2').checked) {$w('#inpMonth').value="December";} else{$w('#inpMonth').value="Dezember";}}
if(currentDay===1) {if($w('#switch2').checked) {$w('#inpDay').value="Monday";} else{$w('#inpDay').value="Montag";}}
if(currentDay===2) {if($w('#switch2').checked) {$w('#inpDay').value="Tuesday";} else{$w('#inpDay').value="Dienstag";}}
if(currentDay===3) {if($w('#switch2').checked) {$w('#inpDay').value="Wednesday";} else{$w('#inpDay').value="Mittwoch";}}
if(currentDay===4) {if($w('#switch2').checked) {$w('#inpDay').value="Thursday";} else{$w('#inpDay').value="Donnerstag";}}
if(currentDay===5) {if($w('#switch2').checked) {$w('#inpDay').value="Friday";} else{$w('#inpDay').value="Freitag";}}
if(currentDay===6) {if($w('#switch2').checked) {$w('#inpDay').value="Saturday";} else{$w('#inpDay').value="Samstag";}}
if(currentDay===0) {if($w('#switch2').checked) {$w('#inpDay').value="Sunday";} else{$w('#inpDay').value="Sonntag";}}
$w('#inpFullYear').value = currentFullYear.toString();
}
else {console.log("Has no Value");
$w('#inpDay').value = "";
$w('#inpMonth').value = "";
$w('#inpFullYear').value = "";
}
}
up
up
Up for what?
The solution is already on the end of this post.
@russian-dima solution? 1st of all… I don’t even have access to the template you made. 2nd It is definetely not solved. You didnt create a form with a date field, you create a date converter.
@daniel_pirozzi
Your wished functionality was…
I’d like to make a text field where the user can only write numbers and it automatically fills the / to separate day, month and year. Like MM/DD/YYYY
And this is exactly what my code do!
You type in your wished → DATE ← and the entered DATE gets separated into its DATE-ELEMENTS → automaticaly.
I do not understand what else you need. And by the way, i can provide some help, but if you need a service …
Or, if wished, you always can contact me (my contact can be found in my profile).
Hi Daniel,
How is it that the date picker is “terrible”, would you please share with us a few of these negative feedbacks?
The date picker is an already existing app, and it might not meet all your specific requirements, but that doesn’t make it “terrible”, we’d highly appreciate you sharing the negative feedback, I’ll make sure Wix knows about them all.
Because people rather JUST write the date insted having to search for the day, search for the month and search for 30 years number ago. It’s a pain! Many users on my website dont even pick their birth date, they just pick todays date to fill the date picker. If they could WRITE the date, would be much better, faster and easier. Thats why Im trying to do. A simple text field, which people can just write numbers and auto fill a “/” between day, month and year. But I dont know how to code and i am asking for some help.
I am here asking for a help, not searching for someone that I have pay to do that. You’re greedy, thats why I downvoted your answer.
@daniel_pirozzi
Oh realy, am i? In ITALY everything for free?
Wait let me think about that.
When i was in ITALY → you already PAY → just for a seat in a RESTAURANT!!!
Just for beein there !
You want to tell me something about ----> GREEDY?
Stupid? Take a seat in ITALIEN RESTAURANT and close your mouth!
@daniel_pirozzi Thank you for sharing your feedback. The date picker - as the name suggests - allows the users to open a mini-calendar window and choose the date they want, users can click on the month of the date picker and navigate to a specific date in the past or in the future.
What you seek is a completely different app, with a little bit of experience of coding, you can use 3 input fields next to each other, and program them so whenever an input has the maximum length and a valid value to automatically focus on the next input field, or you can setup a single input field to automatically add the slashes (/) or dashes (-) to the input field.
Note : The community of this forum will always be happy to assist you by offering ideas to solve your problems, or help you solve your code issues if you share some, but do NOT expect anyone here to give you full solutions, if you’re seeking professional help, you can always hire developers here from the forum, or use the marketplace .
@russian-dima Bro, why are you being rude? I’m not even Italian…
I have been asking for help in more than 50 different forums over my last 10 years and this is the 1st time someone ASK ME TO PAY for the help, thats why I could conclude that you are greedy.
I am Brazilian, I am poor and my country is poor, that’s we NEVER have money to PAY for help, we help each other for FREE.
If was was rich, of course I would hire someone do create my site, instead of that I’m TRYING to do that by myself and asking for some help. SO if you can’t help people for free, don’t even show your face.
Gentlemen (and some not so gentle), this is getting out of hand here, closing this post. If needed, I suggest you meet in person, carrying pistols or bladed weapons to conclude this.