Javascript 将主要Ng时间选择器默认设计从向上和向下箭头修改为角度4中的滑块

我们在应用程序中使用黄金时段选择器

使用以下代码：

默认情况下，它显示带有上下箭头的时间选择器，用于更改小时和分钟

我们想要一个滑动条分别改变小时和分钟

---

我们如何修改日期时间选择器的现有Prime Ng代码以获得滑块而不是上下箭头。

我通过一些调整实现了这一点。在此处发布我的解决方案，以便它可以帮助其他人，并改进我的解决方案

我在里面用了ngPrime滑块。要使DateTimePicker和Slider保持同步，只需更改Slider和输入DateTimePicker即可。使用Css隐藏默认时间选择器

My app.component.html：

我的app.css：

---

如有任何改进，将不胜感激。我是Angular2的新手：

您可以从这里开始研究->但是，我不建议对第三方组件进行大量修改。如果我是你，我会从头开始创建一个来满足需求。

<p-calendar [(ngModel)]="value" class="hide-timer" showTime="true" hourFormat="24" (onInput)="syncTiming()">
  <p-footer>
    Time : {{(hour<10?'0':'')+hour}}:{{(minute<10?'0':'')+minute}}
    <p-slider [(ngModel)]="hour" [min]="0" [max]="23" (onChange)="handleHourChange($event)"></p-slider>
    <p-slider [(ngModel)]="minute" [min]="0" [max]="59" (onChange)="handleMinuteChange($event)"></p-slider>
  </p-footer>
</p-calendar>

import { Component , OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  value= new Date();
  hour=0;
  minute=0;
  handleHourChange=function(event){  // To be called whenever hour value changes
    this.value=new Date(new Date(this.value).setHours(event.value));
  };
  handleMinuteChange=function(event){ // To be called whenever minute value changes
    this.value=new Date(new Date(this.value).setMinutes(event.value));
  };
  syncTiming=function(){   // To called change in time from input field
    if(this.value){
    this.hour=new Date(this.value).getHours();
    this.minute=new Date(this.value).getMinutes();
  }
}
  ngOnInit(){
this.syncTiming()   // initializing hour and minute with initial value of date
}
}

.hide-timer .ui-timepicker{  // for hiding default timepicker
    display:none;
}