Disable Time that exists in a list of datetime

[Boot Dat]

I have a service that calls an api and queries a list of datetime data.

I want during on page load, the datetime component should automatically disable the time that exist in the list of datetime data so a user wouldn't be able to pick or choose the the same time. where the date selected matches the date in the datetime data queried.

example is a booking service where one client shouldn't be able to select a time that is already booked for the selected date.

[Yohapuja Selvakumaran]

Hi Boot Dat,

Thank you for reaching out to us. We have reviewed your request and implemented a solution to disable the selected time from the time popup of the datetimepicker. Below, you'll find the revised code snippet based on your provided sample:

[Index.razor]

 

 

<SfDateTimePicker TValue="DateTime?" @bind-Value="@SelectedDate">

    <DateTimePickerEvents TValue="DateTime?" OnOpen="OpenHandler"></DateTimePickerEvents>

</SfDateTimePicker>

 

 

@code {

    public DateTime? SelectedDate { get; set; } = new DateTime(2024, 12, 2, 17, 0, 0);

 

 

    public async Task OpenHandler()

    {

            await JSRuntime.InvokeVoidAsync("JSMethod");

    }

}

 

 

[Host.cshtml]

 

 

<script>

    function JSMethod() {

         setTimeout(function () {

            var elements = document.getElementsByClassName("e-list-item");

            for (var i = 0; i < elements.length; i++) {

                if (elements[i].classList.contains("e-active")) {

                    elements[i].classList.remove("e-active")

                    elements[i].classList.add("e-disabled");

                    elements[i].style.pointerEvents = 'none'

                    break;

                }

            }

         }, 200);

    }

</script>

 

 

This implementation effectively disables the selected time from the time popup of the datetimepicker. If you have any further questions or need additional assistance, please feel free to ask.

Regards,

Yohapuja S

Attachment: DateTimePicker_Disable_8353502f.zip

[Boot Dat]

I'm not looking forward to disable a time that its date and time has been picked.

i have a list of datetime values

appointments = await BookingService.AppointmentList();

ExcludedTimes = appointments.ToList();

what I want is, if a user selects a date and that date exists in  ExcludedTimes, it should disable all the time of the datetime value available in ExcludedTimes that has been selected, so the user wouldn't be able to select a time that exists in  ExcludedTimes

[Priyanka Karthikeyan]

Hi Boot Dat,

 

To disable specific dates and times in the DateTimePicker component, you can utilize the RenderDayCell event to disable dates and the Open event to disable times that are already appointed. Below is the updated code snippet and sample for your reference:

 

 

Index.razor

@inject IJSRuntime JSRuntime

@using Syncfusion.Blazor.Calendars

<div class="col-lg-12 control-section">
    <div class="control-wrapper">
        <label class="example-label">Select Date and Time</label>
        <SfDateTimePicker TValue="DateTime?" TimeFormat="HH:mm"  @ref="DateTimePickerObj" ShowClearButton="true">
            <DateTimePickerEvents TValue="DateTime?" OnOpen="OpenHandler" OnRenderDayCell="DisableDate"></DateTimePickerEvents>
        </SfDateTimePicker>
    </div>
</div>

 

@code {
    public List<DateTime?> ExcludedTimes { get; set; } = new List<DateTime?>
{
    new DateTime(2024, 6, 5, 0, 0, 0),
    new DateTime(2024, 6, 10, 0, 0, 0) 
};
    private SfDateTimePicker<DateTime?> DateTimePickerObj { get; set; }

    private void DisableDate(RenderDayCellEventArgs args) 
        {
            if (ExcludedTimes.Contains(args.Date))
            {
                args.IsDisabled = true;
            }
        }

    public async Task OpenHandler(object args)
    {
        await JSRuntime.InvokeVoidAsync("JSMethod", ExcludedTimes, DateTimePickerObj.Value);
    }
}
 

Layout.cshtml

    function JSMethod(excludedtimes, selectedDateTime) {

        setTimeout(function () {
            var ul = document.querySelector('.e-list-parent');
            if (ul) {
                var listItems = ul.querySelectorAll('.e-list-item');
                var totalItems = listItems.length;

                for (var i = 0; i < totalItems; i++) {

                    if (selectedDateTime && excludedtimes.includes(selectedDateTime.split('+')[0])) {
                        listItems[i].classList.remove("e-active")

                        listItems[i].classList.add("e-disabled");

                        listItems[i].style.pointerEvents = 'none'
                    }
                }
            }
        }.bind(excludedtimes, selectedDateTime), 100);
        }

</script>

 Documentation: 

 https://blazor.syncfusion.com/documentation/datetime-picker/events#onrenderdaycell

 https://blazor.syncfusion.com/documentation/datetime-picker/events#onopen

And We have already considered the reported requirement “Restrict the time selection in the DateTimePicker component”  as feature at our end and this support will be included in any one of our upcoming releases. At the planning stage for every release cycle, we review all open features, and this will be included in any of our upcoming future releases. You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link:    

    

Feedback Link: https://www.syncfusion.com/feedback/28190/      

 

Please cast your vote to make it count. We will prioritize the features every release based on the demands. If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal. 

 

Regards,

Priyanka K

Attachment: BlazorApp2_e04b84d3.zip

[Boot Dat]

I've already cast a vote on that feedback. 

The solution provided works great, but the issue is it disables the date,

what is needed is to disable the times of the dates in  ExcludedTimes, so if a date is selected and that date belongs in  ExcludedTimes, the available times existing in the date should be disabled so times that isn't already existing can be picked or selected. 

it can be that if an hour of a time is already existing, maybe 2pm is already existing in 

01/06/2024 when that date is selected and it exists  in ExcludedTimes , 2pm should be disabled 

[Priyanka Karthikeyan]

Hi Boot Dat,

 

To disable the time from the excluded datetime after the user selects the date, please follow the code below to achieve your requirement:

 

<script>
     function JSMethod(excludedtimes, selectedDateTime) {

         setTimeout(function () {
             var ul = document.querySelector('.e-list-parent');
             if (ul) {
                 var listItems = ul.querySelectorAll('.e-list-item');
                 var totalItems = listItems.length;
                 for (var i = 0; i < totalItems; i++) {
                     for (var j = 0; j < excludedtimes.length; j++) {
                         if (selectedDateTime && (excludedtimes[j].split('T')[0]).includes(selectedDateTime.split('T')[0])) {
                             if ((excludedtimes[j].split('T')[1].split(':')[0] + ':' + excludedtimes[j].split('T')[1].split(':')[1]) ==(listItems[i].innerText)) {
                                 listItems[i].classList.remove("e-active")
                                 listItems[i].classList.add("e-disabled");
                                 listItems[i].style.pointerEvents = 'none'
                             }
                         }
                     }
                 }
             }
         }.bind(excludedtimes, selectedDateTime), 100);
         }
 

</script>

 

 

Regards,

Priyanka K

Attachment: BlazorApp2_3edc0ee5.zip