부트 스트랩에 대한 날짜 선택기 입력 솔루션 찾기

크로스 브라우저 날짜를위한 모범 사례를 입력합니다 이 기사는 다양한 브라우저에서 날짜 입력 필드를 구현하기위한 과제와 최상의 솔루션을 살펴 봅니다.

> 속성의 무지에 대한 일관되지 않은 브라우저 지원으로 인해 날짜 형식, UTC/현지 시간 문제 및 브라우저 간의 차이를 처리하기위한 강력한 솔루션이 필요합니다.

키 포인트 :

<input type="date"> 및 lang 속성에 대한 브라우저의 지원은 고르지 않아 비 원어민 언어로 입력 위젯을 표시 할 수 없습니다.

많은 JavaScript 솔루션은 날짜 입력에 대한 지원을 향상 시키려고 노력하지만 동시에 데이터를 표시하고 저장하는 두 가지 다른 날짜 형식을 처리 할 수있는 스크립트는 거의 없습니다.

jQuery UI의 DatePicker는 jQuery UI DatePicker는 DateTime 필드를 지원하지 않습니다. Trent Richardson의 Timepicker 플러그인은 표준 DatePicker 위젯에 따라 작동하고 추가 작업없이 DatePicker.less 파일을 사용하는 솔루션으로 작동합니다.

브라우저 호환성 테스트 :
• 우리는 다양한 날짜 입력 유형을 테스트했습니다 (, <input type="date">, , lang, ).
• 브라우저 지원
입력 유형이 없습니다.
• 를 지원하는 브라우저는 일반적으로 altField 및
를 지원하는 반면
• 는 덜지지 적입니다.
모든 브라우저는

속성을 ​​무시하는 것처럼 보이며 입력 위젯은 항상 시스템에서 설정 한 날짜 및 시간 형식을 사용합니다.

폴백 스크립트를 선택하십시오 :

많은 JavaScript 솔루션은 크로스 브라우저 날짜 입력에 대한 지원을 향상시킬 수 있지만 많은 문제가 있습니다. 유지 보수가 활성화되지 않거나 데이터를 표시하고 저장하는 다른 날짜 형식을 처리 할 수 ​​없습니다.

jQuery UI DatePicker의 장점 : date jquery ui datepicker는 datetime datetime-local 조건로드 및 코드 구현 : 필요한 경우에만 jQuery UI DatePicker를로드하려면 기능 감지에 ModernIzr을 사용할 수 있습니다. time 콜백 함수에서는 날짜를 ISO 형식으로 저장하고 메소드를 사용하여 디스플레이 형식을 설정하고 형식을 저장하려면 각 에 숨겨진 month를 만들어야합니다. week 부트 스트랩 통합 :

Bootstrap과 더 잘 통합하려면 Bootstrap의 변수 및 Glyphicons 아이콘을 사용하여 사용자 정의

파일을 만들어야합니다. 이를 위해서는 부트 스트랩의 변수 및 글리 피콘 파일을 가져 와서 덜 변수를 사용하여 jQuery UI의 스타일을 다시 작성해야합니다. datepicker.less

TimePicker 플러그인 : DateTime 필드의 경우 DatePicker와 완벽하게 통합되는 Trent Richardson의 Timepicker 추가 기능을 사용할 수 있습니다.

요약 : Modernizr의 기능 감지, jQuery UI DatePicker의

(그림은 원래 텍스트 형식을 유지하고 변경되지 않은 위치)

altField

(FAQ 부분은 코어 컨텐츠와의 상관 관계가 약하고 더 길기 때문에 생략되므로 필요에 따라 스스로 추가 할 수 있기 때문에 생략됩니다.

위 내용은 부트 스트랩에 대한 날짜 선택기 입력 솔루션 찾기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!