Adil Malik Adil Malik - 2 months ago 12
jQuery Question

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.

Answer

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

Comments