Arav
Arav

Reputation: 5247

Datepicker jquery ui-datepicker-trigger

I need to add two calendar jQuery objects to the html page. I have the below setting for date picker. Have an icon image for opening the calendar object. For absolute positioning the icon image doing the below css ui-datepicker-trigger override. If i have two calendar objects how can i create two overrides for the class because the name of the override class naming convention doesn't to have a id name . Pasted the code in http://jsfiddle.net/y6DDh/

.ui-datepicker-trigger {
    position:absolute;
    left:330px;
    top:300px;
}
$("#datepicker").datepicker({
   //showOn: both - datepicker will come clicking the input box as well as the calendar icon
   //showOn: button - datepicker will come only clicking the calendar icon
   showOn: 'button',
   //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
   buttonImage: 'jquery/jquery-ui-1.10.3/demos/datepicker/images/calendar.gif',
   buttonImageOnly: true,
   changeMonth: true,
   changeYear: true,
   showAnim: 'slideDown',
   duration: 'fast',
   dateFormat: 'dd-mm-yy'
});


$("#datepicker2").datepicker({
   //showOn: both - datepicker will come clicking the input box as well as the calendar icon
   //showOn: button - datepicker will come only clicking the calendar icon
   showOn: 'button',
   //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
   buttonImage: 'jquery/jquery-ui-1.10.3/demos/datepicker/images/calendar.gif',
   buttonImageOnly: true,
   changeMonth: true,
   changeYear: true,
   showAnim: 'slideDown',
   duration: 'fast',
   dateFormat: 'dd-mm-yy'
});

Upvotes: 1

Views: 14070

Answers (1)

user2997761
user2997761

Reputation:

For the first one:

#datepicker + .ui-datepicker-trigger {
    position: absolute;
    left:330px;
    top:300px;
}

For the second:

#datepicker2 + .ui-datepicker-trigger {
    position:absolute;
    left:530px;
    top:300px;
}

Example: http://jsfiddle.net/y6DDh/1/

Upvotes: 2

Related Questions