This is a migrated thread and some comments may be shown as answers.

Using RadTimePicker in RadGrid how get only time using javascript

7 Answers 267 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
SR
Top achievements
Rank 1
SR asked on 06 Oct 2014, 12:06 PM
I have telerik:2RadTimePicker controls with in grid and I want to get the time using javascript. 

one is Start Time other one is  End Time i have to check the Validation  is Start Time Could be > End Time .

Is there any possibility to do this one on when user enter the End Time it will check the validation and throw a error with alert message,

and how to get time form time picker using javascript and do the validations and i want to show the timepicker with redcolor where the time validation is false 


Any Suggestions.,

Regards 

SR.

7 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 09 Oct 2014, 09:23 AM
Hello,

For achieving the required functionality I would suggest you to access the TimePicker controls and apply the validation logic demonstrated in this online example .
As for the coloring of the invalid input, you could simply handle its OnError client event and set a border color for the input.

Regards,
Maria Ilieva
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
SR
Top achievements
Rank 1
answered on 10 Oct 2014, 09:21 AM
Hello,

Thakns for your suggestion actually problem is getting a time from  Radtimepicker with in the grid using javascript function. 


Regards,
SR
0
Maria Ilieva
Telerik team
answered on 14 Oct 2014, 01:56 PM
Hello,

You can attach the client event OnDateChanged to the TimePicker and pass the Client ID of the RadTimePicker. Then from client side access the controls, calculate the time difference from there.
Here is a sample code:
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridEditFormItem && e.Item.IsInEditMode)//edit mode is editform/popup
       {
           GridEditFormItem item = (GridEditFormItem)e.Item;
          RadTimePicker pkr=(RadTimePicker)item.FindControl("RadTimePicker1");
          RadTimePicker pkr2 = (RadTimePicker)item.FindControl("RadTimePicker2");
           
          pkr.ClientEvents.OnDateSelected = "function (button,args){OnDateSelected('" + pkr.ClientID + "','" + pkr2.ClientID +"');}";
          pkr2.ClientEvents.OnDateSelected = "function (button,args){OnDateSelected('" + pkr.ClientID + "','" + pkr2.ClientID +"');}";
       }
   }

JS:
function OnDateSelected(pkr1, pkr2)
    {
    // access the control and set the label value
   }

You can find more on RadTimePicker client side API from here.
RadTimePicker Client Object.

Regards,
Maria Ilieva
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
SR
Top achievements
Rank 1
answered on 16 Oct 2014, 06:56 AM
Hello
Thakns for reply  

I am using this function but unable to get time from time picker can u check this 
 function OnDateSelected(tpCheckIn, tpCheckOut) {
            // access the control and set the label value
            var grid = $find("<%= grid.ClientID %>");
            try {              
                var tableView = grid.get_masterTableView();
                var items = tableView.get_dataItems();
                for (var i = 0; i < items.length; i++) {
                    var rowValues = items[i];
                    var pkr1= rowValues.findElement("picker1");
                    var pkr2= rowValues.findElement("picker2");               
                    var time = pkr1.get_selectedDate();// here i am getting the error "Object doesn't support property or method 'get_selectedDate'"
                    //var time = pkr1.get_selectedDate();/using this one also unable to get the time from picker

                }
            }
            catch (e) {
            }
           
        }

0
Maria Ilieva
Telerik team
answered on 21 Oct 2014, 06:53 AM
Hello,

If you are accessing the picker control in ItemDataBound event as I have suggested and then you passed them as parameters for the "OnDateSelected" function  you could directly use them on the client as the event senders.
Therefore please instead of trying to access the pickers in the RadGrid control, use them directly and see if the selected date is accessible.

Regards,
Maria Ilieva
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
jaswant singh
Top achievements
Rank 1
answered on 28 Dec 2018, 07:24 AM

Hello Sir/Madam

I am using radtime picker, I want to disable past time. please help me

 

Regards,

 

0
Attila Antal
Telerik team
answered on 15 Feb 2019, 01:59 PM
Hi Jaswant,

The described behavior is not a built-in feature/functionality of the controls, therefore, you will need to implement it on your own. You can take advantage of the client-side events of the control to execute your logic at an optimal time.

Below I will show you one example you can achieve this or similar behavior. You can use this a base concept, and adjust it further if needed.

HTML Markup

You can take advantage of the PopupOpening event of the DateTimePicker or TimePicker, which fires before the TimeView is opened. Wire up this event to the control.

<telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server"
    TimeView-Interval="0:1:0">
    <ClientEvents OnPopupOpening="OnPopupOpening" />
</telerik:RadDateTimePicker>

JavaScript

In the OnPopupOpening event handler, you can then access the HTML elements of the TimeView, get access to their values, try converting the values to Date type then compare those with the current time. If Cell's time is less then the current time, disable the links, stop the execution of event handlers.

function DisableEvent(e) {
    // cancel the event
    e.preventDefault();
    // stop the event from bubbling up to its parent elements
    e.stopPropagation();
}
 
function OnPopupOpening(sender, args) {
    // reference to the TimeView element
    var timeView = args.get_popupControl();
    // iterate through the Table cells
    $(timeView.get_element()).find('td').each(function (i) {
        var cell = $(this);
        var cellText = cell.text().trim();// reference to the cell's text value
        var cellTime = cellText.split(" ")[0];// time part of the Cell's value
        var cellHour = parseInt(cellTime.split(":")[0]);// Hour part
        var cellMinutes = parseInt(cellTime.split(":")[1]);// Minutes part
        var isPM = cellText.indexOf("PM") >= 0 ? 12 : 0;// some code to verify whether it is AM or PM time
        if (isPM && cellText.startsWith("12:")) {
            isPM = 0;
        }
        var pastTime = new Date(); // create new Date object
        pastTime.setHours(cellHour + isPM); // set date object hours to the cell's hours
        pastTime.setMinutes(cellMinutes); // set date object minutes to the cell's minutes
 
        var currentTime = new Date(); // create new Date object
        if (pastTime < currentTime) { // compare past Time with current Time
            disableTimeViewCell(cell); // method to disable events such as click, hover, etc..
            // additional styling
            cell.find("a").css("color", "#F1F1F1");
            cell.css("cursor", "not-allowed");
        }
    });
}
 
function disableTimeViewCell(cell) {
    cell.find("a").removeAttr("href"); // remove href attribute of the A element
    cell.on('mousedown mouseup click mouseover mouseout', DisableEvent); // attach event Listeners for some of the events
}

I hope this will prove helpful.

Kind regards,
Attila Antal
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Calendar
Asked by
SR
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
SR
Top achievements
Rank 1
jaswant singh
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or