Setting min and max time in datetime sharepoint field

Forms SharePoint 2019/SE
1

Hello,

I am trying to set the minimum and maximum time in a date-time SharePoint field but i don't know what i am doing wrong.
I want the user to be able to select any date but the time in the date can be between 7 am and 9pm.
What i have tried so far:

fd.field('DateTime').widgetOptions = {
      startTime: new Date(new Date().setHours(7,00,0)), 
      endTime: new Date(new Date().setHours(21, 0, 0)) 
}
//This give me only option of today. So definately not what i want
fd.field('DateTime').widgetOptions = {
    min: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 7,00,0),  
    max: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 21,00,0)
}

Could you please advice me on this? Thanks in advance.

Regards,
Asmita

2

Hello @asmita_adh,

Thank you for pointing that out! We will add the startTime and endTime properties in future releases.

For now, you can use this code to limit the time the user can select:

const options = fd.field('DateTime').widget.timeView.options;
options.min = new Date(2000, 0, 1, 7, 00, 0);
options.max = new Date(2000, 0, 1, 21, 00, 0);
fd.field('DateTime').widget.timeView.setOptions(options);
1 Like
3

Hi @Margo,

Thank you for this. However it only works for all dates with a on change function.
For others looking to get it work:

fd.spRendered(function () {
    limitTimeChoice('Start');
    fd.field('Start').$on('change', function (value) {
        limitTimeChoice('Start');
    });
});

function limitTimeChoice(fieldName) {
    const timeOpt = fd.field(fieldName).widget.timeView.options;
    timeOpt.min = new Date(2000, 0, 1, 7, 00);
    timeOpt.max = new Date(2000, 0, 1, 21, 00);
    fd.field(fieldName).widget.timeView.setOptions(timeOpt);
}
4

@asmita_adh,

Why do you need to limit the time selection for the field when its value changes? What is a use case?

5

@Margo,
My users need to be able to create multiple items at different dates without closing/refreshing the form. :slight_smile:

6

@asmita_adh,

And why do you need to limit the time when field value changes? You can set the time limit on form load like this and it should work:

function limitTimeChoice(fieldName) {
    const timeOpt = fd.field(fieldName).widget.timeView.options;
    timeOpt.min = new Date(2000, 0, 1, 7, 00);
    timeOpt.max = new Date(2000, 0, 1, 21, 00);
    fd.field(fieldName).widget.timeView.setOptions(timeOpt);
}

fd.spRendered(function () {
    limitTimeChoice('Start');
});