Datepicker Month Topic is solved

[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.

[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.

[vario]

But the datepicker still shows days and I would like to have startView and pickLevel as "1 - months" (as shown on datepicker demo).

[kev1n]

Could you post a screenshot what it should look like?

[vario]

Like this:

Screenshot From 2025-06-18 11-34-15.png

[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.

[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...

[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

[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.

[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";
        }
    }
}