CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
Adil Malik
Adil Malik

Reputation: 6357

JQuery Datepicker different styles for different instances

I am using jQuery datepicker on two places on the same page. But I want to give them different styles. How can I do that while both of them have all the same classes?

Code:

$('#startDate').datepicker({ dateFormat: "DD, MM d, yy" });
$('#endDate').datepicker({ dateFormat: "DD, MM d, yy" });

Both these datepickers should look different.

Upvotes: 1

Views: 2140

Answers (3)

HausO
HausO

Reputation: 91

you can use beforeShow function as well,

eg. for change datapicker width:

$('#input-field-id')
    .datepicker({ 
        beforeShow: function(input_element, dp_instance){
            setTimeout(function(){
                // enter your styling here 
                $(dp_instance.dpDiv).css('width', '300px');
            },1, dp_instance);
        }
    });

Upvotes: 0

Adil Malik
Adil Malik

Reputation: 6357

Fortunately I got a change in design. One of my datepicker has now to be inline and other one is the normal datepicker. I wrote this code to achieve the desired style:

<input type="text" name="startDate" id="startDate" onclick="applyDatepickerBorder();"/>

In Javascript I defined this method:

function applyDatepickerBorder(){
    // Inline datepicker doesn't have this id
    $('#ui-datepicker-div').css('border','1px solid');
}

Here is what I finally got:

enter image description here

Upvotes: 1

j08691
j08691

Reputation: 207891

When you download jQuery UI, you can specify the CSS scope for your theme. When you go to the download page, click the dropdown for Advanced Theme Settings.

enter image description here

In order to take advantage of theme scoping, you'll first need to select a theme. When you download your theme in ThemeRoller, you'll be directed back to the download builder again to customize your download.

The theme scope field is where you'll enter a CSS selector representing a portion of your page (or your site) that your theme should apply. For example, if you have an accordion widget in the side navigation column of your site and you want it to have a different theme than other areas of your site, you can type the CSS selector that corresponds with that side navigation column (such as .interiorNavigation) and download your theme. The builder will add a space after your scope selector as well, so don't worry about needing to add one.

As you type your CSS scope, the builder will suggest a corresponding theme folder name. This name can be edited, and it won't auto-suggest another one unless the folder field is empty or un-edited when you type in the scope field.

Once you download and unpack the zip file, you'll see that it contains a theme folder named "theme" (or whatever custom name you entered). Inside that folder you'll find all of the files that make up the jQuery UI CSS Framework. Assuming you entered a scope in the Theme Scope field, all of the CSS included in this folder will be scoped to your selector.

To included this theme on your page, just direct a CSS link to ui.all.css in the "theme_internalNavigation" folder.

<link type="text/css" href="theme_interiorNavigation/ui.all.css" rel="Stylesheet" />

Additional help can be found on the filament group page.

Upvotes: 1

Related Questions