We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hours ranges

Thread ID:

Created:

Updated:

Platform:

Replies:

140879 Nov 12,2018 07:47 PM UTC Nov 19,2018 10:00 AM UTC ASP.NET MVC - EJ 2 10
loading
Tags: DateTimePicker
Norberto
Asked On November 12, 2018 07:53 PM UTC

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 [Syncfusion]
Replied On November 13, 2018 09:42 AM UTC

 
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. 
 
 
Please let us know if you need any further assistance.  
 
Regards,  
Deepa L. 


Norberto
Replied On November 14, 2018 01:32 AM UTC

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 [Syncfusion]
Replied On November 14, 2018 07:16 PM UTC

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
Replied On November 14, 2018 10:29 PM UTC

Hello Deepa L

I attach two files, the view and the model.

Thank you

Attachment: Files_baf7f6ad.zip

Deepa Loganathan [Syncfusion]
Replied On November 15, 2018 07:37 AM UTC

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.  

 
Regards,  
Deepa L. 


Norberto
Replied On November 16, 2018 01:39 AM UTC

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 [Syncfusion]
Replied On November 16, 2018 01:09 PM UTC

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.  
 
 
Please get back to us if you have any further queries.  
 
Regards,  
Deepa L. 


Megatron
Replied On November 16, 2018 06:55 PM UTC

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
Replied On November 18, 2018 03:38 PM UTC

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 [Syncfusion]
Replied On November 19, 2018 10:00 AM UTC

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.
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;