The use of bootstrap-datetimepicker time plugin in angular project

1. Requirements:

A function that is often used in the background system, select a time interval, and filter some information according to this time interval, for example, registered users in a certain time period.

Second, the final effect

3. The file to be imported (src/index.html)

Note: 1. The jQuery file is referenced first, because the plug-in on the initialization date needs to find the object in the DOM and add some styles;

2. It can be seen that the file bootstrap.min.css is not referenced in my project, because this style is globally referenced in index.html, which has a great impact on the style that has been written, so the impact is the style It's messy, you need to do it yourself for the style of the rendering (the first picture) you see, write a common style, and reference it in each component.

The specific style will not be added. I believe that if you refer to this pit of the plug-in, it is a trivial matter, just think of a creamy chocolate, and slowly 'taste' it with a sense of accomplishment~ 

 

Fourth, the code part

A、 To Date

(html code)

<!--Select time datetimepicker select to day-->
<div>
  <label class="date-label-width">时间（To Date）:</label>
  <div class="input-group date form_datetime date-div-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-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
  </div>

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

</div>

JS code

//Initialize the date plugin -- select the day
$('#startTime').datetimepicker({
  format: 'yyyy-mm-dd',//display format
  todayHighlight: 1,//Highlight today
  minView: "month",//Set to display only the month
  startView: 2,
  forceParse: 0,
  showMeridian: 1,
  autoclose: true,//Auto close after selection
  language:  'zh-CN',
  weekStart: 1,
  // todayBtn:  1,
  // autoclose: 1,
  // todayHighlight: 1,
  // startView: 2,
  // minView: 2,
  // forceParse: 0,
  // pickerPosition:'bottom-right'//The position where the date plugin pops up
}).on("changeDate", function () {
  $('#endTime').datetimepicker('setStartDate', $("#startTime").val());
  console.log( $("#startTime").val());
  $("#endTime").focus()
});


$('#endTime').datetimepicker({
  format: 'yyyy-mm-dd',//display format
  todayHighlight: 1,//Highlight today
  minView: "month",//Set to display only the month
  startView: 2,
  forceParse: 0,
  showMeridian: 1,
  autoclose: true,//Auto close after selection
  language:  'zh-CN',
  weekStart: 1,
  // todayBtn:  1,
  // autoclose: 1,
  // todayHighlight: 1,
  // startView: 2,
  // minView: 2,
  // forceParse: 0,
  // pickerPosition:'bottom-right'//The position where the date plugin pops up
}).on("changeDate", function () {
  $('#startTime').datetimepicker('setEndDate', $("#endTime").val());
  console.log( $("#endTime").val());

});

The format parameter can set the format of the date, yyyy-mm-dd, yyyy/mm/dd

B、To Minute

(html code)

<!--Select time datetimepicker select to minutes-->
<div>
  <label for="dtp_input1" class="date-label-width">时间（To Minute）：</label>
  <div class="input-group date form_datetime date-div-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-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
    <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
  </div>
  <input type="hidden" id="dtp_input1" value="" />

  <label for="dtp_input2">-</label>
  <div class="input-group date form_datetime date-div-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-div-inline"><span class="fa fa-calendar fa-lg"></span></span>
    <!--<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>-->
  </div>
  <input type="hidden" id="dtp_input2" value="" />
</div>

(JS code)

// //Initialize the date plugin -- select to minutes
$('#startTimeMinute').datetimepicker({
  // language: 'fr',
  format: 'yyyy-mm-dd hh:ii',//display format
  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',//display format
  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());

});

Note: Because it is a time interval, the first input is the start time, and the second is the end time. The start time must be before the end time. Therefore, the id must be added to the input, not the div.

So far, I have seen the desired effect as I wished, and I am ready to wash and sleep, how about you?

All criticisms and corrections are welcome.