Date Picker Restrict to only Saturdays

Wappler General Need Help
1

I need to only show a certain day of the week on the Date Picker as a valid date, such as only Saturdays. The only thing I can find is showing a valid range based on min max from a query. How can I do this?

2

Not with a computer near, but you can create some csv file with all the invalid dates (all of them except saturday), add it to server array, or a table and use it for invalid dates

3

You can do it but you will need some custom code.
Create a js file and include it on your page.
Its content should be:

dmx.Component('date-picker2', {
    extends: 'date-picker',

    attributes: {
        'onlysaturday': {
            type: Boolean,
            default: false
        }
    },
    isInvalidDate: function (date) {
        if (this.props.onlysaturday) {
            var day = date.day();
            if (day !== 6) return true;
        }
        return dmx.Component('date-picker').prototype.isInvalidDate.call(this, date);
    }

});

And on your page you need to change your date picker component code from:

is="dmx-date-picker"

to

is="dmx-date-picker2"

and add the onlysaturday attribute to it:

<input type="text" class="form-control" id="date1" name="date1"  is="dmx-date-picker2" onlysaturday>
1 Like
4

Thanks. I'll give it a try.

5

Does not seem to be working. I created a js file, "calendarRestrict.js", put it in the js folder. Added a script link in the layout page. Seems to load correctly.

image
image1212×240 23.2 KB

Modified the Date Picker to dmx-date-picker2. Added onlysaturday to the input.

<input type="text" class="form-control" id="CurrentDate" name="currentdate" aria-describedby="input1_help" is="dmx-date-picker2" onlysaturday>

The date picker works, but there are no restrictions. I can select any date.

image
image1172×594 31.7 KB

What am I doing wrong?

6

Sorry, my code needed to be updated for App Connect 2 :slight_smile:

Here's the correct version:

dmx.Component('date-picker2', {
    extends: 'date-picker',
    attributes: {
        'onlysaturday': {
            type: Boolean,
            default: false
        }
    },
    _isInvalidDate: function (date) {
        if (this.props.onlysaturday) {
            var day = date.day();
            if (day !== 6) return true;
        }
        return dmx.Component('date-picker').prototype._isInvalidDate.call(this, date);
    }

});
2 Likes
7

Works perfect, thanks!.