2012-08-16 3 views
1

나는 여러 jquery-ui datepicker의 글꼴 크기를 독립적으로 제어 할 수 있기를 원합니다. 텍스트 입력에 연결된 2 개의 datepicker가 있습니다. 다음과 같이 선언 :
되는 HTML에서 $('#Date1').datepicker({firstDay: 1,showWeek: true});
$('#Date2').datepicker({firstDay: 1,showWeek: true});

다른 글꼴 크기의 Jquery-ui 다중 datepicker

, 그들은 다음과 같이 사용됩니다
<input type="text" size=10 maxlength=10 id="Date1">
<input type="text" size=10 maxlength=10 id="Date2">

가 어떻게 독립적으로 날짜 선택기의 글꼴 크기를 변경하려면 어떻게해야합니까?
<style type="text/css"> .ui-datepicker { font-size: 12px; } </style>
은 둘 다 datepicker에 영향을 미칩니다.
<style type="text/css"> #Date1 { font-size: 12px; } </style> 아무 작업도 수행하지 않습니다.
내가 을 만들면 <input> 문자 입력에도 영향을 미치므로 원하지 않습니다.

감사합니다.

+0

추가 **! 중요 ** # 날짜 1 CSS –

답변

0

처럼 그냥 날짜 선택기하지 입력 타겟팅 할 수 있습니다 사업부, 할일은 인스턴스에 종속 된 클래스를 추가하고 제거하는 것입니다.

이 부분을 참조하십시오. jsFiddle example.

jQuery를

$('#Date1').datepicker({ 
    firstDay: 1, 
    showWeek: true 
}); 
$('#Date2').datepicker({ 
    firstDay: 1, 
    showWeek: true, 
    beforeShow: function(input, inst) { 
     $('.ui-datepicker').addClass('bigFont'); 
    }, 
    onClose:function(input, inst) { 
     $('.ui-datepicker').removeClass('bigFont'); 
    } 
});​ 
+1

의 글꼴 크기가이 그냥 좋은 작품과 함께, 감사합니다! –

0

당신이 볼 수 입력 필드에 요소를 검사하는 경우 여기 내 JSfiddle는, 당신이 그것을 모두 datepickers에 대한 SAME 요소를 사용하여 독립적으로 글꼴 크기를 변경할 수 없습니다

$('#Date1 > .ui-datepicker').css({ 'font-size': 12px}); 
0

당신이 만약 날짜 선택기가 최고의 당신이 만드는 인스턴스 수에 관계없이 같은 일 개 날짜 선택기를 사용하기 때문에 너무

div#newDiv .ui-datepicker:first-child //gets you the first one 
    div#newDiv .ui-datepicker:last-child //gets you the last one 
관련 문제