Reputation: 5247
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
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