Display DateSelected as Ordinal Date

3 posts, 0 answers
  1. Dennis
    Dennis avatar
    7 posts
    Member since:
    Dec 2014

    Posted 26 Apr Link to this post

    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.
  2. Dennis
    Dennis avatar
    7 posts
    Member since:
    Dec 2014

    Posted 27 Apr Link to this post

    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.

  3. Dennis
    Dennis avatar
    7 posts
    Member since:
    Dec 2014

    Posted 04 May Link to this post

    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);
    }
Back to Top