title: Datepicker jquery ui-datepicker-trigger
body: <p>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 <a href="http://jsfiddle.net/y6DDh/" rel="nofollow">http://jsfiddle.net/y6DDh/</a> </p>
  
  <pre><code>.ui-datepicker-trigger {
      position:absolute;
      left:330px;
      top:300px;
  }
  </code></pre>
  
  <blockquote>
  <pre><code>$("#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'
  });
  </code></pre>
  </blockquote>