올바른 방법으로 jQuery-UI dateselect를 Zend Framework 2 양식 요소에 첨부 할 수 있습니까?

Question

젠드 프레임 워크 2 폼 요소에 jQuery-UI dateselect를 부착하는 올바른 방법은 무엇입니까?

클래스/ID를 선택하는 레이아웃의 끝에 자바 스크립트 선택기가 추가되도록 appendScript를 추가하겠습니까?

Answer 1

, 나는 여기에

내가 모든 할당

$this->inlineScript()->offsetSetFile(10,$basePath . '/jquery/jquery-1.10.1.min.js'); 
$this->inlineScript()->offsetSetFile(12,$basePath . '/jquery-ui/ui/jquery-ui.min.js'); 

내 layout.phtml의 선두입니다 ... 좀 더 많은 연구를했고, 내 자신의 접근 방식 함께했다 내 자바 스크립트는 ID를 가지고 있기 때문에 모두 올바른 순서로로드됩니다.

그때 나는 내 양식이를 사용 ... 기본적으로는 어떤 형태의 요소가 그 이름에 설정 한 ID를 가지고 같은,이 후 매우 입력 # 이름

$this->add(array(
    'name' => 'start', 
    'type' => 'DateTime', 
    'options' => array(
     'label' => 'Start Date', 
     'format' => 'Y-m-d H:i P', 
    ), 
)); 

그와 스타일 ITE 쉽게 보인다 다음과 스타일에 쉽게, 여기 내 $의 action.phtml ... 당신은 내가 이것은 내 모든 템플릿에 무엇을 사용 99 오프셋 할당 여기에서 볼 수 있습니다

echo $this->form($form); 

# Decorations 
$this->inlineScript()->offsetSetScript(99," 
$(function() { 
    $('input#start').datepicker({ 
     dateFormat: 'yy-mm-dd', 
     showOtherMonths: true, 
     selectOtherMonths: true, 
    }); 
}); 
"); 

이다.

Answer 2

우선, 시간을 갖고 사용을 시작하고 Zend\Form\Element\Date을 사용하는 것이 좋습니다. 날짜 입력을 지원하지 않는 모든 브라우저는 여전히 type="text"의 입력을 렌더링하므로 문자 그대로 손실이 없습니다.

대부분의 최신 브라우저는 기본 Datepicker를 렌더링 할 수 있다는 장점이 있습니다. 브라우저의 기본값을 사용하는 것은 사용자 편의성과 편의성을 위해 선호됩니다. IE10조차 현재 CSS3와 HTML5의 깔끔한 것들을 지원하는 훌륭한 일을합니다. 물론 당신은 확신 할 수 없으므로 구형 브라우저에 대해서도 항상 대체해야합니다. 이를 위해, 나는 당신이 맹목적으로 사용자 기본값을 덮어 쓰는 것에 찬성하여 Feature-Detection으로 실행하는 것이 강력하게 권장됩니다. 일을 가장 잘 수행하는 라이브러리는 아마도 Modernizr입니다. 나는 그것을 위해 JS를 줄 것이다.

또 다른주의 사항은이 종류의 JavaScript가 에 있으며 문서의 하단에 속하는 것입니다. 무엇 happeing있어하는 것이이이를 위해 당신은 이제 당신의 $action.phtml

<?php $this->inlineScript()->captureStart(); ?> 
Modernizr.load({ 
    test: Modernizr.inputtypes.date, 
    nope: [ 
     'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 
     'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 
     'jquery-ui.css' 
    ], 
    complete: function() { 
     $('input[type=date]').datepicker({ 
      dateFormat: 'yy-mm-dd' 
     }); 
    } 
}); 
<?php $this->inlineScript()->captureEnd(); ?> 

안에이 같은 적절한 장소 내에서 원하는 스크립트를 인쇄하려면 </body> 태그 지정

<?=$this->inlineScript();?> 

를 닫기 전에이 권리를 인쇄 할 수있는 모더 나이저 -library는 HTML5의 Date-Input에 대한 브라우저 지원을 확인합니다. 브라우저가 이 아니고이 DateSelect를 렌더링 할 수없는 경우 해당 JavaScript 라이브러리 (jQuery, jQueryUI 및 CSS)가로드되고 DOM에 첨부되며 입력 요소로 jQueryUI.datepicker()이 호출됩니다.

또한이 JS-Stuff는 모두 캡처되어 DOM의 끝으로 이동합니다 (스크립트 요소가 추가됩니다). 이렇게하면 먼저 전체 DOM이 렌더링되고 JS가 첨부된다는 장점이 있습니다. 양식이 Raj가 제공 한 예보 다 곧 사용할 수 있음을 의미합니다. 2 개 응답에 따라