problem encountered with this Calendar: It changes date in the evening before midnight, is the data (time and) the date taken from the web?
I would like this calendar to be able to take the time directly in my Windows, that would solve the problem of the date change...
2nd) Today's date 2025/2/27, I would like it to add the 0 - 2025/02/27
2025/2/2 - for 2025/02/02
I get the date like this:
2025/2/27
Could I place in this program: a window, to choose options, for the date:
mm/dd/yy
yy/mm/dd
mm-dd/yy
yy-mm-dd
mm.dd.yy
yy.mm.dd
As far as I can see, this javascript code uses the UTC date and time.
If you want to get the correct time (and date change) in your timezone, you must treat the timezones accordingly.
I suggest searching online for a tool that better suits your needs, including the different formats and formatting. A tool that is less than 20 years old and is actively supported would also be helpful.
Below you can find a simple HTML example page including everything needed (as STYLE and SCRIPT).
In most modern browsers you don't need any special date picker anymore. <input type="date" id="inputDate">
should do the job in
The choosen date will be formatted in various ways as you define it in the HTML-Code.
You can choose the country code as in
which will translate the names for day and month into the corresponding language. or
you can choose the format code as in
Feel free to adjust and reduce the HTML-code to your needs.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Datum mit verschiedenen Varianten formatieren</title>
<style>
input {
width: 250px;
padding: 10px;
margin: 10px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: #f9f9f9;
}
input:focus {
border-color: #66afe9;
outline: none;
box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 10px;
}
</style>
</head>
<body>
<label for="inputDate">Choose Date:</label>
<input type="date" id="inputDate">
<br><br>
<b>will be formatted into:</b>
<br><br>
<label for="formattedDateAR">Formated Arabic Date AR-GE:</label>
<input type="text" id="formattedDateAR" readonly>
<br><br>
<label for="formattedDateDE">Formatiertes Deutsches Datum de-DE:</label>
<input type="text" id="formattedDateDE" readonly>
<br><br>
<label for="formattedDateFR">Date formatée FR-CA:</label>
<input type="text" id="formattedDateFR" readonly>
<br><br>
<label for="formattedDateSergius">Sergius formatted Date:</label>
<input type="text" id="formattedDateSergius" readonly>
<script>
document.getElementById('inputDate').addEventListener('input', function() {
var inputDate = new Date(this.value);
if (!isNaN(inputDate.getTime())) {
var formattedDateAR = formatDateString(inputDate,'ar-GE');
var formattedDateDE = formatDateString(inputDate,'de-DE');
var formattedDateFR = formatDateString(inputDate,'fr-CA');
document.getElementById('formattedDateAR').value = formattedDateAR;
document.getElementById('formattedDateDE').value = formattedDateDE;
document.getElementById('formattedDateFR').value = formattedDateFR;
var formattedDateSergius = formatDateSergius(inputDate,'mm-dd/yy');
document.getElementById('formattedDateSergius').value = formattedDateSergius;
}
});
function formatDateString(date, country) {
var options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'};
return date.toLocaleDateString(country, options);
}
function formatDateSergius(date, mask) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
if (mask === 'mm/dd/yy') { return `${month}/${day}/${year}`};
if (mask === 'yy/mm/dd') { return `${year}/${month}/${day}`};
if (mask === 'mm-dd/yy') { return `${month}-${day}/${year}`};
if (mask === 'yy-mm-dd') { return `${year}-${month}-${day}`};
if (mask === 'mm.dd.yy') { return `${month}.${day}.${year}`};
if (mask === 'yy.mm.dd') { return `${year}.${month}.${day}`};
}
</script>
</body>
</html>
This is just an example
You can adjust the HTML code to your needs.
Feel free to change the line var formattedDateSergius = formatDateSergius(inputDate,'mm-dd/yy');
to whatever format you like to see, for example var formattedDateSergius = formatDateSergius(inputDate,'mm/dd/yy');
If you find a variant that is not yet in
if (mask === 'mm/dd/yy') { return `${month}/${day}/${year}`};
if (mask === 'yy/mm/dd') { return `${year}/${month}/${day}`};
if (mask === 'mm-dd/yy') { return `${month}-${day}/${year}`};
if (mask === 'yy-mm-dd') { return `${year}-${month}-${day}`};
if (mask === 'mm.dd.yy') { return `${month}.${day}.${year}`};
if (mask === 'yy.mm.dd') { return `${year}.${month}.${day}`};
That's not weird, I just needed to know if this works for you in Canada first.
I send you another modified version for all visible dates in a few minutes.
Hello @LyricsLover, I thought of something, it would be better for everyone Europe and Canada
If you could modify the 1st date picker, which is the same date for everyone, that we could copy/paste
You make copies of modifications of the 1st date picker with
mm/dd/yy
yy/mm/dd
mm-dd/yy
yy-mm-dd
mm.dd.yy
yy.mm.dd
Thank you @LyricsLover for your help today, it was much appreciated
I liked your calendar, but with the problems, of dates, because we are not on the same continent, there are certain programs that are managed by the Internet with different time zones, the calendars are not all managed by our Windows, I learned a good lesson today…
Hello @LyricsLover, good news, the calendar that you found and modified for me, for the date formats, that I had asked for, finally gives me the right date...
At first I had the date March 02, 2025 and the other dates: March 01, 2025
I looked at the data, it was very easy to modify, to have the same date
I noticed, that the program added +1 for the month, I added +1 for the day, that solved the problem.
I placed 4 photos, thank you very much for your help
Line #79 adds +1 to the month because the JavaScript methoddate.getMonth() retrieves the month from the Date-Object 0-based (i.e. January is 0 and December is 11). To start with the month at 1, +1 is added to obtain and show the correct number of months (1-based).
Hello @LyricsLover, I was wondering why +1 for the month, thanks for the info...
Before making the modification of this program, a few minutes before midnight, the 1st date of the calendar was:
1 March 2025, correct date
and the others date 28 February 2025, incorrect date
At midnight sharp, the 1st date of the calendar changed to
2 March 2025 correct date
and the others date 1 March 2025, incorrect date
Whether before or after midnight in Canada, the 1st date is always correct, the date is modified at midnight sharp, it is the calculation of the other dates that are not correct...
I wonder where this calendar takes the information for the 1st date?
This date is correct, for us in Canada...
Is it the calculation for other dates that are not the same dates, always one day behind?
From your local Windows settings about Date & Region, including Daylight Saving Time and your current Windows Time.
The Windows Time can be set manually or you can use one of the worlwide time servers to synchronize it automatically.
