Page 1 of 1
Datepicker Month
Posted: Wed Jun 18, 2025 11:08 am
by vario
I'd like to have a datepicker with format 'M yyyy' but can't work out how to set the options for the datepicker.
Ideally, the field value would be the first day of the chosen month but that's not essential.
Re: Datepicker Month
Posted: Wed Jun 18, 2025 11:48 am
by kev1n
The nuDate form format 'mm yyyyy' (all lowercase) allows you to select both month and year.
Note that the month will appear as a two-digit number—e.g., 01, 02, 12, etc.
Re: Datepicker Month
Posted: Wed Jun 18, 2025 11:56 am
by vario
But the datepicker still shows days and I would like to have startView and pickLevel as "1 - months" (as shown on datepicker demo).
Re: Datepicker Month
Posted: Wed Jun 18, 2025 12:18 pm
by kev1n
Could you post a screenshot what it should look like?
Re: Datepicker Month
Posted: Wed Jun 18, 2025 12:36 pm
by vario
Like this:
Screenshot From 2025-06-18 11-34-15.png
Re: Datepicker Month
Posted: Wed Jun 18, 2025 1:08 pm
by kev1n
This specific format may not be supported at the moment (to be verified)
The Vanilla JS datepicker format will need to be inspected and translated into a format compatible with nuBuilder.
Another solution: Consider using the Input Type "Month", an HTML5 <input type="month"> element, which allows selection of both year and month.
Re: Datepicker Month
Posted: Wed Jun 18, 2025 2:05 pm
by vario
The field does contain a valid date value after selection of the month so perhaps it will be possible to accomodate datepicker options
I would use the HTML5 input type (it was my first thought), but we currently use Firefox. Perhaps I'll have to give in and change to Chromium...
Re: Datepicker Month
Posted: Wed Jun 18, 2025 2:41 pm
by kev1n
If you declare a function called
nuOnSetCalendarOptions in your form's Custom Code, you can override the default
Vanilla JS Datepicker options.
For example:
Code: Select all
window.nuOnSetCalendarOptions = function(id, { options }) {
return Object.assign(options, {
startView: 1, // "months" view
pickLevel: 1 // select only month/year
});
};
You can also modify options conditionally for a specific calendar input by checking the object
id
Code: Select all
window.nuOnSetCalendarOptions = function(id, { options }) {
// Replace 'yourSpecificId' with the id you want to target
if (id === 'yourSpecificId') {
return Object.assign({}, options, {
startView: 1, // "months" view
pickLevel: 1 // select only month/year
});
}
// If id doesn't match, return options unchanged
return options;
};
This lets you apply different settings to different fields within the same form.
m_y_vanilla.png
Re: Datepicker Month
Posted: Wed Jun 18, 2025 3:20 pm
by vario
That works for me, though one small difference from the online demo is the date value that gets passed down to my PHP procedure shows the current day of month rather than the first day (as shown in the demo), but I can work around that for the time being.
*UPDATE* : with input format "yyyy-mm-dd" I get the first day of month, with my chosen custom format of "mmmm yyyy" I get today's date.
Re: Datepicker Month
Posted: Thu Jun 19, 2025 5:59 am
by kev1n
You can use
nuSetNuDataValue() within the form's Before Save (BS) event to modify field values before they are saved to the database. For example, in your case, you could replace the day portion of a date with "01":
Code: Select all
$nuMainForm = nuHash()['nuFORMdata'][0]->id;
$idValue = nuGetNuDataValue($nudata, $nuMainForm, 'mydateobjectid'); // <------------------- replace with your Object ID
function replaceDayWithFirst($dateString) {
// Validate format: YYYY-MM-DD using regex
if (preg_match('/^\d{4}-\d{2}-\d{2}$/', $dateString)) {
// Replace the day part with 01
return substr($dateString, 0, 8) . '01';
} else {
// Return original value
return $dateString;
}
}
$newValue = replaceDayWithFirst($idValue);
nuSetNuDataValue($nudata, $nuMainForm, 'mydateobjectid', $newValue); // <------------------- replace with your Object ID
Another option is to use
nuOnRawValueFormatted()* in the form's Custom Code to replace the day portion of the date with "01".
(*) This has just been added to Github
Code: Select all
function nuOnRawValueFormatted(id, value, format) {
if (id === 'mydateobjectid') { // <------------------- replace with your Object ID
if (value.length === 10) {
return value.slice(0, -2) + "01";
}
}
}