BootStrap 폼 시간 선택 기 상세 설명

머리말
대부분의 프로젝트 에서 사용자 인터페이스의 시간 선택 은 필수 적 이다.프로젝트 의 사용자 체험 우호 도 라 는 전제 에서 사용자 가 시간 을 입력 하지 않도록 하 는 것 이 특히 중요 하 다.또한 사용자 의 입력 시간 에는 형식 이 고정 되 지 않 은 문제 가 존재 하여 백 스테이지 의 개 발 량 을 늘 릴 수 있다.
이 럴 때 플러그 인 을 입력 하 는 데 시간 이 필요 합 니 다.형식 은 저희 가 설정 하고 사용자 의 입력 절 차 를 줄 여 사용자 체험 우호 도 를 높 입 니 다.
쓰다
bootStrap 의 시간 플러그 인 datetimepicker 지원 인터페이스 다 원 화 는 이 시간 선택 기 를 설명 하 는 전문 적 인 사이트 주소 가 있 습 니 다.
부 트 스 트랩 시간 선택 기
Demo
플러그 인 이 가지 고 있 는 방법 과 시간 을 이용 합 니 다.간단 한 데모 할 수 있어 요.
demo 기능 점:
1.yyy-MM-dd hh:ii:ss(형식 은 사용자 정의 가능)로 날짜 형식 을 입력 하 십시오.
2.이전 날짜 의 시간 을 입력 한 후,다음 날짜 의 입력 값 은 이전 날짜 보다 작 을 수 없습니다.
3.다음 날짜 의 시간 을 입력 한 후 이전 날짜 의 입력 값 은 이전 날짜 보다 크 면 안 됩 니 다.
boottstrap 에서 봉 인 된 css 와 js 를 제공 해 야 합 니 다

<link href="bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />
<script src="bootstrap-datetimepicker.js"></script>
<script src="bootstrap-datetimepicker.zh-CN.js"></script>
<script>
 $.fn.datetimepicker.defaults = {
  //    
  language: 'zh-CN',
  //      
  format: "yyyy-mm-dd hh:ii:ss",
  autoclose: true,
  todayBtn: true,
  //          
  pickerPosition: "bottom-left"
 };
</script>

 <div class="input-append date form_datetime">
 <input size="16" type="text" value="" id="startTime" readonly>
 <input size="16" type="text" value="" id="endTime" readonly>
</div>

<script>
 $(function () {

  var picker1 = $('#startTime').datetimepicker();
  var picker2 = $("#endTime").datetimepicker();

  //       (         :              )
  picker1.on('changeDate', function (e) {
   picker2.datetimepicker('setStartDate', e.date);
  });
  //       (         :              )
  picker2.on('changeDate', function (e) {
   picker1.datetimepicker('setEndDate', e.date);
  });

 });

</script> 
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기