Изменение размера Jquery Calendar с помощью размещенной в Google темы

Question

Я пытаюсь реализовать средство выбора даты Jquery с помощью размещенной в Google темы. Но Календарь слишком большой. Могу ли я сделать его уменьшенной версией, изменив саму функцию, увидев, что я не могу сменить тему?

<link rel="stylesheet"  
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"      
      type="text/css" media="all" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $(function() {
    $("#datepicker").datepicker({ dateFormat: $.datepicker.W3C });
  });
</script>

ОБНОВЛЕНИЕ: я скачал файл css, размещенный в Google, и вручную изменил значения в нем. Однако теперь клавиши со стрелками в моем календаре прошли путь. Если я переключу src = на размещенный в Интернете скрипт Google, появятся стрелки, но их размер снова будет огромным.

Answer 1

Размер средства выбора даты определяется свойством CSS font-size.

<div id="datepicker" style="font-size: 90%"></div>

Кроме того, я вижу, что вы используете CDN Google для обслуживания CSS, но не сценарий JQuery, почему?

Answer 2

На демонстрационной странице приведен пример HTML-кода, который можно использовать в качестве стиля:

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible">
   <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
      <a class="ui-datepicker-prev ui-corner-all">title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
      <a class="ui-datepicker-next ui-corner-all" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a>
      <div class="ui-datepicker-title">
         <span class="ui-datepicker-month">January</span><span class="ui-datepicker-year">2009</span>
      </div>
   </div>
   <table class="ui-datepicker-calendar">
      <thead>
      <tr>
         <th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
         ...
      </tr>
      </thead>
      <tbody><tr>
         <td class="ui-datepicker-week-end ui-datepicker-other-month "> 1 </td>
         ...
      </tr>
      </tbody>
   </table>
   <div class="ui-datepicker-buttonpane ui-widget-content">
      <button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Today</button>
      <button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all">Done</button>
   </div>
</div>

Примените новые стили к этим классам после того, как вы импортируете таблицу стилей из Google, и все будет в порядке. Например (просто в качестве примера - я понятия не имею, будет ли это хорошо выглядеть):

.ui-datepicker-div { font-size: 75%; }