Hours ranges

[Norberto]

Hello friends.

I have a little doubt with the DateTimePicker control.

Just as you can set a minimum and maximum for dates, can I set a predefined time range? for example, for all dates, only hours from 09:00 to 20:00.

Thank you very much for your help.

Edit:

Another doubt, as I put the time range, I do not want every 30 minutes, I want every 60 minutes.

I'm sorry for my English.

[Deepa Loganathan]

 

Hello Norberto,  

 

Thanks for contacting Syncfusion support.  

 

Query: Set the time interval of timepicker to 60 minutes.  

 

You can set the time interval in Timepicker by using the Step API of Datetimepicker 

 

Query: Disable range of time values in Datetimepicker 

 

In Datetimepicker a range of time values can be disabled in the open event as given in the below code. Here we have disabled a range of time values by comparing the timestamp of current selection with the minimum and maximum time values as given below. 

 

<ejs-datetimepicker id="datetime" step="60" open="onOpen" timeFormat="H:mm" format="dd/MM/yyyy H:mm"></ejs-datetimepicker> 

 

<script> 

    function onOpen(args) { 

        if (!args.popup.element.classList.contains('e-datepicker')) { 

            //finding all the li elements in timepicker popup 

            var allItems = this.popupObject.element.children[0].querySelectorAll('.e-list-item'); 

            var minTimeObj = new Date('1/1/2019 09:00 AM'); // generate timestamp of min time 

            var minTime = +minTimeObj.getTime(); 

            var maxTimeObj = new Date('1/1/2019 08:00 PM'); 

            var maxTime = +maxTimeObj.getTime(); // generate timestamp of max time 

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

                var time = allItems[i].getAttribute('data-value'); 

                var tempObj = new Date("1/1/2019" + " " + time); 

                var temp = +tempObj.getTime(); 

                //checking each li value with min and max time values 

                if (!((minTime <= temp) && (temp <= maxTime))) { 

                    //if the time values not in range then add in-built 'e-disabled' class to disable it 

                    allItems[i].classList.add('e-disabled'); 

                } 

            } 

        } 

    } 

</script> 

 

 

For your reference, we have prepared a sample based on your requirement. Please check the below Stackblitz link. Please make use of this solution in your application to achieve the expected behaviour. 

 

https://stackblitz.com/edit/ycprxo-qzcfad?file=index.ts   

 

Please let us know if you need any further assistance.  

 

Regards,  

Deepa L. 

[Norberto]

Hello Deepa L., thank you very much for your quick response.

Use your code but a problem appears as seen in the image. Date invalid

a greeting

[Deepa Loganathan]

Hi Norberto,  

 

Thanks for the update.  

 

From the screenshot provided in your last update, we saw that you were trying to set the format of Timepicker as “12:00 a. m.” and while parsing this time format, the Javascript returns Invalid date error.  

 

So, would you please kindly share us your exact requirement, if you wish to set a custom time format for the Datetimepicker? If so, kindly share us the view page of your application that would help us assist you better.  

 

Regards,  

Deepa L. 

[Norberto]

Hello Deepa L

I attach two files, the view and the model.

Thank you

Attachment: Files_baf7f6ad.zip

[Deepa Loganathan]

Hi Norberto,  

 

Thanks for providing us the requested details.  

 

From the sample provided in your last update, we have confirmed that you have used Croatian locale your application. 

The meridian part in the time format of this culture “a. m.” requires to be parsed to generate a valid Date object and we have used our parseDate method of globalization module to parse the time value. 

  

 

<script> 

 

function onOpen(args) { 

        if (!args.popup.element.classList.contains('e-datepicker')) { 

            //finding all the li elements in timepicker popup 

            var allItems = this.popupObject.element.children[0].querySelectorAll('.e-list-item'); 

            var min = new Date().setHours(9); 

            var minTime = new Date(new Date(min).setMinutes(30)); // generate timestamp of min time 

            var maxTime = new Date().setHours(20); // generate timestamp of max time 

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

                var time = allItems[i].getAttribute('data-value'); 

                var todayDate = new Date().toLocaleString(this.locale).split(',')[0]; 

                // using EJ parse Date method to parse the time string based on the loaded culture and get the resultant date object properly 

                var tempObj = this.globalize.parseDate(todayDate + ' ' + time, { 

                    format: this.cldrDateTimeFormat(), type: 'datetime' 

                }); 

                var temp = +tempObj.getTime(); 

                //checking each li value with min and max time values 

                if (!((minTime <= temp) && (temp <= maxTime))) { 

                    //if the time values not in range then add in-built 'e-disabled' class to disable it 

                    allItems[i].classList.add('e-disabled'); 

                } 

            } 

        } 

    } 

 

</script> 

 

 

So please make use of the above solution to resolve the reported issue and let us know if you have any further queries.  

 

Please check our below help page to know more about internationalization module.  

https://ej2.syncfusion.com/documentation/common/internationalization#code-classlanguage-textparsedatecode  

 

Regards,  

Deepa L. 

[Norberto]

Hi friend, Your answer worked for me, you're the best!

I have another problem, when I select any date, by default, select the time of 12:00 a.m.

It is possible that the default time is the first one that is enabled. 

Regards my friend.

[Deepa Loganathan]

Dear Norberto,  

 

Sorry for the inconvenience. 

 

The default value of Datetimepicker can be set based on the minTime and maxTime settings by using the Change and Created event of Datetimepicker as given in the below code.  

 

 

[index.cshtml] 

 

<div class="col-sm-10"> 

            @Html.EJS().DateTimePickerFor(model => model.FechaInicio).Open("onOpen").Width("300px").Change("checkInRange").Created("checkInRange").Render() 

        </div> 

 

[Script] 

     

 

   var minTime = new Date(new Date(new Date(new Date(new Date(new Date().setHours(9))).setMinutes(30)).setSeconds(0)).setMilliseconds(0));// generate timestamp of min time 

   var maxTime = new Date(new Date(new Date(new Date(new Date().setHours(20)).setMinutes(0)).setSeconds(0)).setMilliseconds(0));// generate timestamp of max time 

    var jsonData = { "minTime": minTime, "maxTime": maxTime }; 

 

 

function checkInRange(args) { 

        var instance = document.getElementById("FechaInicio").ej2_instances[0]; 

        var args = args == undefined ? instance : args; 

        if (args.value != null) { 

            var time = this.element.value.split(" "); 

            var todayDate = new Date().toLocaleString(this.locale).split(',')[0]; 

            var tempObj = this.globalize.parseDate(todayDate + ' ' + time[1] + " " + time[2] + " " + time[3] , { 

                format: this.cldrDateTimeFormat(), type: 'datetime' 

            }); 

            // check the selected value as has time which is within in the time range from 9:30 a. m. to 8:00 p. m. 

            if (!(+jsonData.minTime < +tempObj && +tempObj < +jsonData.maxTime)) { 

                instance.value = new Date(new Date(args.value.setHours(jsonData.minTime.getHours())).setMinutes(jsonData.minTime.getMinutes())); 

            } 

        } 

    } 

 

 

Here, we have set the minTime and maxTime of Datetimepicker in jsonData variable and used it to set the default value of Datetimepicker.  

 

Please check our API document to explore about the options available in Datetimepicker.  

 

https://ej2.syncfusion.com/documentation/api/datetimepicker/dateTimePickerModel#created  

 

Please get back to us if you have any further queries.  

 

Regards,  

Deepa L. 

[Megatron]

Hello, I have a similar question.

How can I limit entry of only hours worked.

For example, hours volunteered by day. We want to show much time has a person volunteered everday in the week. So we want to get the volume of hours. HH:mm not specific time, but how many hours?

[Norberto]

Hello Deepak.

You are the best, your answers solved my problem.

I love Syncfusion support.

Many thanks and success in your daily tasks.

Greetings from Colombia.

[Deepa Loganathan]

Dear Norberto,   

 

Thanks for your valuable feedback and appreciation.  

 

From the details provided in your last update, we suspect that you wish to get the number of hours volunteered by a person per day.  

 

Instead of customizing the Datetimepicker, this requirement can be easily achieved by using  

1.      A Datepicker control, to get the date input. 

2.      Two Timepicker controls, to get the start and end Time of work. 

 

The working hours (to restrict the time selection in working hours of the day) can then be set in each Timepicker by setting the min and max API of Timepickers respectively. 

 

Please let us know if you need a sample for achieving this requirement. If not, kindly get back to us with you exact application needs, so that we can assist you better.  

 

Regards,
Deepa L.