각도 프로젝트에서 bootstrap-datetimepicker 시간 플러그인을 사용하는 예

이 글에서는 주로 Angle 프로젝트에서 bootstrap-datetimepicker time 플러그인의 사용 사례를 소개하고, 참고자료를 제공하겠습니다.

1. 요구 사항:

백그라운드 시스템에서 자주 사용되는 기능으로, 시간 간격을 선택하고 이 시간 간격을 기준으로 일부 정보를 필터링합니다(예: 특정 기간에 등록된 사용자).

2. 최종 효과

3. 가져와야 하는 파일(src/index.html)

참고: 1. 초기화 시 jQuery 파일이 먼저 인용됩니다. 날짜, 플러그인이 필요합니다. DOM에서 개체를 찾아 몇 가지 스타일을 추가하세요.

2. 보시다시피 bootstrap.min.css 파일은 내 프로젝트에서 참조되지 않습니다. 왜냐하면 이 스타일은 인덱스에서 전역적으로 참조되기 때문입니다. .html은 이미 작성되어 있는 내용이므로 그 영향으로 인해 스타일이 엉망이 됩니다.(첫번째 사진)은 직접 작성하셔야 합니다. 각 구성요소에서 이를 참조하세요.

특정 스타일은 추가하지 않겠습니다. 플러그인을 참고하시면 이 핏을 발견하실 수 있을 거라 생각합니다. of achievement~

4. 코드 부분

A.To Date

(html 코드)

<!--选择时间 datetimepicker 选择到天-->
<p>
 <label class="date-label-width">时间（To Date）:</label>
 <p class="input-group date form_datetime date-p-inline">
  <input type="datetime" size="16" id="startTime" name="startTime" class="date-input-size date-minute-bgcolor" value="" readonly >
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </p>

 <label for="endTime" >-</label>
 <p class="input-group date form_datetime date-p-inline">
  <input type="datetime" id="endTime" name="endTime" class="date-input-size date-minute-bgcolor" value="" readonly>
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
 </p>
</p>

JS 코드

//初始化日期插件 -- 选择到天
$('#startTime').datetimepicker({
 format: 'yyyy-mm-dd',//显示格式
 todayHighlight: 1,//今天高亮
 minView: "month",//设置只显示到月份
 startView:2,
 forceParse: 0,
 showMeridian: 1,
 autoclose: true,//选择后自动关闭
 language: 'zh-CN',
 weekStart: 1,
 // todayBtn: 1,
 // autoclose: 1,
 // todayHighlight: 1,
 // startView: 2,
 // minView: 2,
 // forceParse: 0,
 // pickerPosition:'bottom-right'//日期插件弹出的位置
}).on("changeDate", function () {
 $('#endTime').datetimepicker('setStartDate', $("#startTime").val());
 console.log( $("#startTime").val());
 $("#endTime").focus()
});

$('#endTime').datetimepicker({
 format: 'yyyy-mm-dd',//显示格式
 todayHighlight: 1,//今天高亮
 minView: "month",//设置只显示到月份
 startView:2,
 forceParse: 0,
 showMeridian: 1,
 autoclose: true,//选择后自动关闭
 language: 'zh-CN',
 weekStart: 1,
 // todayBtn: 1,
 // autoclose: 1,
 // todayHighlight: 1,
 // startView: 2,
 // minView: 2,
 // forceParse: 0,
 // pickerPosition:'bottom-right'//日期插件弹出的位置
}).on("changeDate", function () {
 $('#startTime').datetimepicker('setEndDate', $("#endTime").val());
 console.log( $("#endTime").val());
});

format 이 매개변수는 날짜 형식을 yyyy-mm-dd, yyyy/mm/로 설정할 수 있습니다. dd

B.To Minute

(html code)

<!--选择时间 datetimepicker 选择到分钟-->
<p>
 <label for="dtp_input1" class="date-label-width">时间（To Minute）：</label>
 <p class="input-group date form_datetime date-p-inline" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  <input class="date-input-size " id="startTimeMinute" size="16" type="text" value="" readonly>
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </p>
 <input type="hidden" id="dtp_input1" value="" />

 <label for="dtp_input2">-</label>
 <p class="input-group date form_datetime date-p-inline" data-date="" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
  <input class="date-input-size " id="endTimeMinute" size="16" type="text" value="" readonly>
  <span class="input-group-addon date-p-inline"><span class="fa fa-calendar fa-lg"></span></span>
  <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
 </p>
 <input type="hidden" id="dtp_input2" value="" />
</p>

(JS code)

// //初始化日期插件 -- 选择到分钟
$('#startTimeMinute').datetimepicker({
 //language: 'fr',
 format: 'yyyy-mm-dd hh:ii',//显示格式
 weekStart: 1,
 todayBtn: 1,
 autoclose: 1,
 todayHighlight: 1,
 startView: 2,
 forceParse: 0,
 showMeridian: 1
}).on("changeDate", function () {
 $('#endTimeMinute').datetimepicker('setStartDate', $("#startTimeMinute").val());
 console.log( $("#startTimeMinute").val());
 $("#endTimeMinute").focus()
});

$('#endTimeMinute').datetimepicker({
 //language: 'fr',
 format: 'yyyy-mm-dd hh:ii',//显示格式
 weekStart: 1,
 todayBtn: 1,
 autoclose: 1,
 todayHighlight: 1,
 startView: 2,
 forceParse: 0,
 showMeridian: 1

}).on("changeDate", function () {
 $('#startTimeMinute').datetimepicker('setEndDate', $("#endTimeMinute").val());
 console.log( $("#endTimeMinute").val());
});

참고: 시간 간격이므로 첫 번째 입력은 시작 시간, 두 번째 입력은 종료 시간, 시작 시간은 종료 시간 이전이어야 하므로 ID는 p가 아닌 입력에 추가해야 합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

npm 관리자로 설치 시 권한 문제 해결

JS 익명 함수 및 익명 자체 실행 함수 개념 및 사용법 분석

p5에서의 마우스 상호작용 예시. Node.js 입문 튜토리얼

위 내용은 각도 프로젝트에서 bootstrap-datetimepicker 시간 플러그인을 사용하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!