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.
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
0
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
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
Thakns for your suggestion actually problem is getting a time from Radtimepicker with in the grid using javascript function.
Regards,
SR
0
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:
JS:
You can find more on RadTimePicker client side API from here.
RadTimePicker Client Object.
Regards,
Maria Ilieva
Telerik
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) {
}
}
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
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
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
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.
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.
I hope this will prove helpful.
Kind regards,
Attila Antal
Progress Telerik
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.