Display DateSelected as Ordinal Date

[Dennis]

Is there any way to have the displayed date on the DatePicker to be formatted as YYDDD?  Example: 04/26/2017 will become 17116.  I would like to keep the selected date to be 04/26/2017 but have the ordinal date displayed to the user.

[Dennis]

I have decided to attack this a different way, but ran into a different issue now.  I have decided to change the date displayed in the calendar to the user using the CalendarDayTemplate and SpecialDays.  However, I am trying to add these components from the codebehind.

Here is what I have come up with:

ASPX

<telerik:RadDatePicker ID="rdp1" runat="server" RenderMode="Lightweight">

 

ASPX.cs

protected void Page_Load(object sender, EventArgs e)
    {
        setup_rdp();
    }

protected void setup_rdp()
    {
        RadCalendar cal = rdp1.Calendar;
        RadCalendarDay rcd = new RadCalendarDay(cal);
        DayTemplate dt = new DayTemplate();
        HtmlGenericControl div = new HtmlGenericControl("DIV");
        div.InnerText = "94";
        div.Attributes["class"] = "centered";
        dt.ID = "dt1";
        dt.Controls.Add(div);
        rcd.Date = new DateTime(2017, 4, 1);
        rcd.TemplateID = "dt1";
        cal.CalendarDayTemplates.Add(dt);
        cal.SpecialDays.Add(rcd);
    }

 

My intent is to use this in a loop to set all the days of the month.  What am I doing wrong or is there a better way to show it.  I want it to look and behave like the attached photo.

[Dennis]

I found my solution using JavaScript.  Here is the markup.

HTML:

<telerik:RadDatePicker ID="rdpStartedDate" runat="server" RenderMode="Lightweight" Width="85px" CssClass="rad_Date_Override " DateInput-DateFormat="MM/dd/yyyy" ShowPopupOnFocus="true" DatePopupButton-Visible="false" ShowAnimation-Type="Slide" HideAnimation-Type="Slide">
                                                                    <Calendar runat="server" FirstDayOfWeek="Sunday" ClientEvents-OnDayRender="OnDayRenderOrdinalDay" ClientEvents-OnLoad="OnLoadOrdinalCal" Width="230px" Height="200px" />
                                                                </telerik:RadDatePicker>

JavaScript:

function OnDayRenderOrdinalDay(calendarInstance, args) {
    //debugger;
    var date = new Date(args.get_date()[0], args.get_date()[1] - 1, args.get_date()[2]);
    var start = new Date(date.getFullYear(), 0, 0);
    var diff = date - start;
    var oneDay = 1000 * 60 * 60 * 24;
    var day = Math.floor(diff / oneDay);
    args.get_cell().innerHTML = day;
}

function OnLoadOrdinalCal(sender) {
    //debugger;
    var calendar = sender;

    //In order to fire the client-side OnDayRender event, the calendar should be navigated to a view different that the current one.
    var nextMonthDay = [calendar.get_focusedDate()[0], calendar.get_focusedDate()[1] + 1, 1];
    var currentDay = [calendar.get_focusedDate()[0], calendar.get_focusedDate()[1], 1];
    calendar.navigateToDate(nextMonthDay);
    calendar.navigateToDate(currentDay);
}