Hello Neslon,
Here is a form with your example installed.
Form field 'birth date' is the date field for selecting a date.
Form field 'ISO Calendar Week' automatically displays the calendar week of the currently selected date according to ISO-8601 (weeks starting on Monday).
The unfilled form:
vi-solutions.de/forum-uploads/week-of-year-form_start.png
The form with a selected date and the automatically calculated calendar week:
vi-solutions.de/forum-uploads/week-of-ye...rm_date-selected.png
The form configuration, tab 'Frontend Webassets':
vi-solutions.de/forum-uploads/week-of-ye...rm-configuration.png
The function used in JavaScript comes from this website:
www.w3resource.com/javascript-exercises/...date-exercise-24.php
Your 'incorporating a JS snippet' is called 'Frontend Webassets' in Visforms:
docs.joomla-4.visforms.vi-solutions.de/e...-frontend-webassets/
All settings are made in the form:
docs.joomla-4.visforms.vi-solutions.de/e...are-made-in-the-form
A comment on your example.
Quote: 'November 27, 2023, that is week number 47'.
Unfortunately that is not correct.
November 27, 2023 is in week 48 according to ISO-8601.
Please also see here:
www.epochconverter.com/weeknumbers
The JavaScript code from the form configuration, tab 'Frontend Webassets':
Code:
jQuery(document).ready(function() {
console.log(' FEWA script loaded');
const dateFieldID = '479'; // Visforms date field ID of field list
const numberFieldID = '555'; // Visforms number field ID of field list
jQuery(`#field${dateFieldID}`).on('change', function() {
let value = jQuery(this).val();
let parts =value.split('.');
const date = new Date(`${parts[2]}-${parts[1]}-${parts[0]}`);
jQuery(`#field${numberFieldID}`).val(getWeekISO8601(date));
});
function getWeekISO8601(dt) {
const tdt = new Date(dt.valueOf());
const dayn = (dt.getDay() + 6) % 7;
tdt.setDate(tdt.getDate() - dayn + 3);
const firstThursday = tdt.valueOf();
tdt.setMonth(0, 1);
if (tdt.getDay() !== 4) {
tdt.setMonth(0, 1 + ((4 - tdt.getDay()) + 7) % 7);
}
return 1 + Math.ceil((firstThursday - tdt) / 604800000);
}
});
The following must be adapted to your form in the JavaScript code:
The Visforms field ID for the date field: const dateFieldID = '479';
The Visforms field ID for the week field: const numberFieldID = '555';
You can use text or number (as in the example) as the field type for the week field.
Kind regards, Ingmar
I recommend you the new and up-to-date documentation for Joomla 4:
.
