부트스트랩 형식으로 날짜를 선택하는 방법

대부분의 프로젝트에서는 사용자 인터페이스의 시간 선택이 필수적입니다. 프로젝트의 사용자 경험 편의성을 전제로 사용자가 직접 시간을 입력하지 못하도록 하는 것이 특히 중요합니다. 또한, 사용자 입력 시간의 포맷이 불안정해지는 문제가 발생하게 되며, 이로 인해 백엔드 개발량이 늘어나게 됩니다. 이때 시간 입력 플러그인을 사용해야 합니다. 형식은 사용자가 직접 설정하므로 사용자의 입력 프로세스가 줄어들고 사용자 편의성이 향상됩니다.

bootStrap의 시간 플러그인 datetimepicker를 사용하면 인터페이스 다양화를 지원하며 이 시간 선택기를 설명하는 전용 URL이 있습니다.

Demo

플러그인에서 제공하는 방법과 시간을 사용하세요. 간단한 데모를 만들 수 있습니다.

데모 기능 포인트:

1. 입력 날짜 형식은 yyyy-MM-dd hh:ii:ss입니다(형식은 사용자 정의 가능).

2. 이전 날짜의 시간을 입력한 후 다음 날짜의 입력 값은 이전 날짜보다 작을 수 없습니다.

3. 다음 날짜의 시간을 입력한 후에는 이전 날짜의 입력 값이 이전 날짜보다 클 수 없습니다.

관련 권장 사항: "Bootstrap 시작 튜토리얼"

캡슐화된 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: &#39;zh-CN&#39;,
  //默认选择格式
  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 = $(&#39;#startTime&#39;).datetimepicker();
  var picker2 = $("#endTime").datetimepicker();
  //动态设置最小值(选择前面一个日期后：后面一个日期不能小于前面一个)
  picker1.on(&#39;changeDate&#39;, function (e) {
   picker2.datetimepicker(&#39;setStartDate&#39;, e.date);
  });
  //动态设置最大值(选择后面一个日期后：前面一个日期不能大于前面一个）
  picker2.on(&#39;changeDate&#39;, function (e) {
   picker1.datetimepicker(&#39;setEndDate&#39;, e.date);
  });
 });
</script>

위 내용은 부트스트랩 형식으로 날짜를 선택하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!