DateTime mask control with calender

[Mac P]

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

[Dimo]

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

[Mac P]

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

[Mac P]

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

[Dimo]

Hello Mac,

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

Sincerely yours,
Dimo
the Telerik team

[Mac P]

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.

[Dimo]

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

[Mac P]

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

[Dimo]

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