>웹 프론트엔드 >JS 튜토리얼 >각도 프로젝트에서 bootstrap-datetimepicker 시간 플러그인을 사용하는 예

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

亚连
亚连원래의
2018-05-30 10:13:061386검색

이 글에서는 주로 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 코드

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

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

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

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

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

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

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

관련글 :

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

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

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

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.