angular - ng2 的不正确显示 - angular4 中的 datetimepicker

Question

我正在尝试从此链接中使用 datetimepicker -

https://www.npmjs.com/package/ng2-datetimepicker

我有三个问题。

1我已经实施了所有步骤。但是，日期时间选择器的显示不正确。看起来像这样

扭曲的日期时间选择器的图像

[2] 我已经使用日期时间选择器两次来接受一个值范围。但是 datetimepicker 显示相同的结果。意味着如果我更改从值，则目标值也会更改为从值。反之亦然。

[3] 该链接未显示如何获取 component.ts 文件中的值。我想知道该怎么做。

组件.html

#addbtn{
float:right;
}

thead>tr>th:hover {
cursor: pointer;
background-color: #384c57;
color: rgb(240, 202, 132);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 
0.24);
}

th{
width:1px;white-space:nowrap;
}



.glyphicon-th{
vertical-align: middle;
}

table{
 font-family: Arial, Helvetica, sans-serif;
 table-layout: fixed;
 display: block;
 overflow: scroll;
 }


thead{
background-color: #33444d;
color: white;  
}


.card{
border: none !important;
}


#faIcon{
 background: #2f4855;
 color: white;
 border: none;
 }

 input:hover {
 background-color: rgb(247, 185, 114)  
 }

 input:focus{
 border : 2px solid rgb(247, 185, 114) !important;
 }



 .panel {
  border: none;
  margin-bottom: 0
  }

 .panel-transparent {
 background: none;
 }

#searchTableStyle{
overflow:visible;
background-color:transparent;
border:transparent;

position: relative
}

.table{
color:rgb(255, 255, 255); background-color:rgba(17, 26, 24, 0.452);
}

 .panel-transparent .panel-heading{
 background: rgba(44, 51, 59, 0.575)!important;
 text-align: center;
 color: #fff;

  }
 .my-pagination /deep/ .ngx-pagination .current {
  background: #33444d;
  }

日期时间选择器 .css

.ngx-picker--btn {
  color: #000;
 background-color: transparent;
 border: none;
 padding: 1em;
 font-size: 1em; }
 .ngx-picker--btn__selected {
  background-color: #eee; }
.ngx-picker--btn:hover {
 transition: .25s ease;
 background-color: #eee;
  cursor: pointer; }
 .ngx-picker--btn:focus {
  outline-color: transparent; }

 .ngx-picker--btn__month:hover {
  border-top-left-radius: 0.2em; }

 .ngx-picker--btn__done:hover {
  border-bottom-right-radius: 0.2em; }

.ngx-picker--btn__now:hover {
 border-bottom-left-radius: 0.2em; }

.ngx-picker--btn__next:hover {
 border-top-right-radius: 0.2em; }

.calendar {
 position: absolute;
 background-color: #e6e6e6;
 max-width: 16em;
 min-width: 16em;
 font-size: 16px;
 font-family: "Arial", sans-serif;
 border-radius: 0.2em;
 box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 
 0.22); }

 .calendar--previous-and-next {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: flex-end; }

 .calendar--footer {
   display: flex;
  justify-content: space-between;
  background-color: #e6e6e6;
  padding: 0;
  border-radius: 0.2em; }

 .calendar--years-select,
 .calendar--months-select {
  overflow-y: auto;
  overflow-x: hidden;
 max-height: 14.85em;
 background-color: #fff;
 width: 100%; }

 .calendar--year,
  .calendar--month {
   display: block;
  padding: .5em 1em;
  width: 100%;
  overflow: hidden;
   color: #000; }
  .calendar--year__selected,
   .calendar--month__selected {
   color: #000;
   font-weight: bold;
   background-color: #eee; }
   .calendar--year:hover,
   .calendar--month:hover {
   cursor: pointer;
   background-color: #eee;
   font-weight: 400;
   color: #000; }
   .calendar--year__disabled,
    .calendar--month__disabled,
    .calendar--day__disabled {
    cursor: default;
    pointer-events: none;
    color: #888;
    background-color: #ebebe4; }

  .calendar--days-of-week {
   display: flex;
   justify-content: space-around;
   background-color: #eee; }

  .calendar--day-of-week {
   position: relative;
   padding: .5em;
   text-align: center;
   text-transform: uppercase;
    color: #000;
    font-size: .9em; }

  .calendar--days-select {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   justify-content: space-between;
   background-color: #fff; }

  .calendar--day {
   text-align: center;
   width: 2.25em;
   padding: .5em 0;
   font-weight: 500;
   color: #000; }
   .calendar--day__muted {
   color: #999; }
  .calendar--day__selected {
   background-color: #eee;
   color: #000; }
  .calendar--day:hover {
   cursor: pointer;
   color: #000;
   background-color: #eee; }

  .ngx-picker {
  display: flex;
   position: relative; }
  .ngx-picker .calendar {
   position: absolute;
   left: 0;
   top: 2.5em;
   z-index: 3; }

  .time-picker {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   max-width: 16em;
    min-width: 16em;
   background-color: #e6e6e6; }

  .time--values {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   flex-wrap: wrap;
   max-width: 16em;
   min-width: 16em;
   background-color: #eee; }

  .time--value {
   width: 2.66em;
  font-size: 1em;
  padding: .5em 0;
  text-align: center;
  color: #000; }
   .time--value__selected {
  color: #000;
   background-color: #e6e6e6; }
  .time--value:hover {
   transition: .25s ease;
   cursor: pointer;
   background-color: #e6e6e6; }

  [hidden] {
   display: none !important; }

标签： angulardatetimepicker