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

DateTime mask control with calender

8 Answers 118 Views
Input
This is a migrated thread and some comments may be shown as answers.
Mac P
Top achievements
Rank 1
Mac P asked on 23 Jun 2010, 05:07 AM
Hello,

Is there any equivalent control to one shown below for date time input?
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/MaskedEdit/MaskedEdit.aspx
It will be great if we can have calender icon along with it.

I tried input manager but it doesnt support the mask.

My project currently is in beta stage and i  have lots of user controls. Now when the user controls are added to page the html size increases due to large number of datetime input controls. I have to remove all telerik datetime input controls because it emits lots of html and javascript blocks that causes large page size. I do use sharedcalender and sharedtimeview but still the performance is not good.

While finding alternatives i found above link but i dont want to have ajax library in the project just to use one control.

Any help or sample project is appreciate.

To summarise
1) Want to get rid of telerik datetime input and calender and timeview controls.
2) find any light weight calender that just have a client side javascript library
3) Find light weight date time masked validator control with possible calender icon to support opening of calender incase user wants to.

regards
mac

8 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 Jun 2010, 11:42 AM
Hi Mac,

The most lightweight approach for numerous datetimepickers is the following:

http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/shareddatepicker/defaultcs.aspx?product=calendar

You can use a combination of a shared calendar with RadMaskedTextBoxes, but this will not be as lightweight as the example above. Here is an example, which shows a similar scenario and you can use it as a starting point.

http://www.telerik.com/community/code-library/aspnet-ajax/calendar/how-to-use-raddatepicker-with-multimonthview-calendar.aspx

The difference in your case will be that you will have a RadMaskedTextBox instead of a RadDatePicker. The Calendar will pop after clicking on some button. The two controls' client API should be used to pass values to and from each other.


Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Mac P
Top achievements
Rank 1
answered on 30 Jun 2010, 02:42 PM
Dimo

Thanks for your suggestion. Is there a similar solution to date time control as in the link below?
http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/shareddatepicker/defaultcs.aspx?product=calendar
0
Mac P
Top achievements
Rank 1
answered on 30 Jun 2010, 10:56 PM
Dimo

The suggestion provided in shared rad calender worked great.
http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/shareddatepicker/defaultcs.aspx?product=calendar

I have one issue. 
EnableScreenBoundaryDetection doesnt work when i open the popup from the script.
 When the text box is last control in the page, i want calender to open on top of textbox (like raddatepicker) but currently it opens at the bottom of textbox so users will have to scroll it. Is there any solution for that?

 

I use following to open the popip
var

 

 

position = datePicker.getElementPosition(currentTextBox);

 

 

 

datePicker.showPopup(position.x, position.y + currentTextBox.offsetHeight);

 

 




regards
Mac
0
Dimo
Telerik team
answered on 01 Jul 2010, 08:24 AM
Hello Mac,

You should use the showPopup() method without parameters, otherwise the popup is displayed where explicitly specified.

Sincerely yours,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Mac P
Top achievements
Rank 1
answered on 01 Jul 2010, 04:36 PM

Dino,
Thanks for your reply.
I made it work for one resolution by hardcoding the calender height

 

var

 

 

const_calenderheight = 178;

 

 

 

 

if (position.y + const_calenderheight > posBottom()) {

 

datePicker.showPopup(position.x, (position.y - const_calenderheight ));

}

 

 

else {

 

datePicker.showPopup(position.x, position.y + currentTextBox.offsetHeight);

}


where posBottom() is the browser bottom. I cant get calender height before it is displayed. So i ran below code to get the calender height.
var popupElement = picker.get_popupContainer();
     var dimensions = picker.getElementDimensions(popupElement);
     alert(dimemsions.height)

Do let me know if you have better solution. But so far it seems to be a workaround solution for me. And yes the whole purpose of doing this helped me reducing page size.

Can you please point to me direction where i can use similiar funcitonality for date and time input control

Thanks for your help.
0
Dimo
Telerik team
answered on 02 Jul 2010, 09:34 AM
Hello Mac,

I am not sure why you want to hard-code popup position when the datepicker control has screen boundary detection and can determine the best popup position on the fly. But otherwise your approach is OK.

The required technique to pop a TimeView is the same as the one used for RadCalendar, except that you need to use get_timePopupContainer() instead of get_popupContainer(), and showTimePopup() instead of showPopup().


<telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server">
    <ClientEvents OnPopupOpening="MyOpening" />
</telerik:RadDateTimePicker>
 
<script type="text/javascript">
 
function MyOpening(sender, args)
{
    var popupControlType = Object.getType(args.get_popupControl()).getName();
    if (popupControlType.indexOf("RadTimeView") != -1)
        var popupElement = sender.get_timePopupContainer();
    else
        var popupElement = sender.get_popupContainer();
    var dimensions = sender.getElementDimensions(popupElement);
     
    args.set_cancel(true);
     
    // pop the Calendar or TimeView here again at an explicit position
    // ...
 
}
 
</script>


Regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Mac P
Top achievements
Rank 1
answered on 02 Jul 2010, 02:20 PM
Dino,

Screen bounday detection doesnt work for this example. That is the reason writing custom code.

You can try it here.
http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/shareddatepicker/defaultcs.aspx?product=calendar
0
Dimo
Telerik team
answered on 02 Jul 2010, 02:38 PM
Hello Mac,

Yes, screen boundary detection does not work in the specified demo, because it uses a RadDatePicker in a quite specific scenario, with no RadDateInputs, according to which the popups are normally positioned automatically.


Regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Input
Asked by
Mac P
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Mac P
Top achievements
Rank 1
Share this question
or