Help with styling DateField

  1. #1

    Help with styling DateField

    I need to define multiple styles for a DateField. I know I can override the standard styles (ie. x-datepicker-cell), but I need to have multiple styles for my web site since it houses multiple web applications that use different themes. I'm hoping for something elegant like

    .helpSection .x-datepicker-cell: hover 
    {
    	background-color: #D9E1F2 !important;
    	background-image: none !important;
    	border-color: #8EA9DB !important;
    	border-width: 1px !important;
    	border-style: solid !important;
    	color: #000000 !important;
    }
    Html.X().DateFieldFor(m => m.Request.RequestedDueDate)
    	.ID("dfDueDate")
    	.FieldCls("LabelSmallFont")
    	.LabelCls("LabelSmallFont")
    	.LabelAlign(LabelAlign.Top)
    	.FieldLabel("Requested Due Date:")
    	.MarginSpec("0 0 0 10")
    	.Width(178)
    	.EmptyText("Select a date")
    	.Editable(false)
    	// disables Saturday and Sunday, so the due date cannot fall on those days
    	.DisabledDays(new int[] { 0, 6 })
    	.ShowToday(false)
    	.AutoDataBind(true)
    	.Format("MMMM d, yyyy")
    	.Cls("helpSection")
    instead of having to walk the elements of the control with javascript. The styles I most need to override are the hot-tracking (hover effect) on the dates, and the header of the dropdown. But, really, I'm most interested in understanding HOW to style this control... not just the answer to changing the header and hover effect. Thanks so much to anybody who can point me in the right direction.
  2. #2
    Hi @craigthames,

    Welcome to the Ext.NET forums!

    To stylize a DateField's picker you should set up a CSS class for that picker with a PickerOptions Cls.

    Example
    @{
        var X = Html.X(); 
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC v2 Example</title>  
        
        <style>
            .my-date-picker .x-datepicker-month .x-btn-inner {
                color: red;
            }
        </style>
    </head>
    <body>
        @X.ResourceManager()
    
        @X.DateField().PickerOptions(X.DatePicker().Cls("my-date-picker"))
    </body>
    </html>
    This video helps to understand what you should do to find correct CSS styles.
    CSS Change TabPanel Header Color - Ext.NET on Vimeo
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @craigthames,

    Welcome to the Ext.NET forums!

    To stylize a DateField's picker you should set up a CSS class for that picker with a PickerOptions Cls.

    Example
    @{
        var X = Html.X(); 
    }
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>Ext.Net.MVC v2 Example</title>  
        
        <style>
            .my-date-picker .x-datepicker-month .x-btn-inner {
                color: red;
            }
        </style>
    </head>
    <body>
        @X.ResourceManager()
    
        @X.DateField().PickerOptions(X.DatePicker().Cls("my-date-picker"))
    </body>
    </html>
    This video helps to understand what you should do to find correct CSS styles.
    CSS Change TabPanel Header Color - Ext.NET on Vimeo
    Thank you for the video link, Daniil. It definitely helped.

Similar Threads

  1. [CLOSED] CSS Styling of MessageBox
    By betamax in forum 2.x Legacy Premium Help
    Replies: 15
    Last Post: Jan 14, 2014, 1:26 PM
  2. [CLOSED] MessageBox CSS Styling
    By VirtualArtists in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 05, 2013, 3:29 PM
  3. [CLOSED] Styling dates in DateField control
    By rmelancon in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 27, 2012, 1:15 PM
  4. Styling the UI
    By LucJ in forum Open Discussions
    Replies: 2
    Last Post: Dec 09, 2009, 3:52 AM
  5. What about styling the UI ?
    By LucJ in forum 1.x Help
    Replies: 0
    Last Post: Dec 04, 2009, 4:14 AM

Tags for this Thread

Posting Permissions