将 Prime Ng 时间选择器默认设计从向上和向下箭头修改为 Angular 中的滑块 4

Question

我们在我们的应用程序中使用 Prime Ng Time Picker。

使用以下代码：

<p-calendar [(ngModel)]="value" showTime="true" hourFormat="24"></p-calendar>

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

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

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

Answer 1

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

我在 <p-calender> 的 <p-footer> 中使用了 ngPrime Slider。要使 DateTimePicker 和 Slider 保持同步，请在滑块上使用 onChange，在 datetimepicker 上使用 onInput。使用 Css 隐藏默认时间选择器。

我的app.component.html:

<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>

我的app.component.ts:

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
}
}

我的app.css:

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

Working Example 任何改进将不胜感激。我是 Angular2 的新手 :)

将 Prime Ng 时间选择器默认设计从向上和向下箭头修改为 Angular 中的滑块 4

Modify the Prime Ng time picker default design from up and down arrow to sliders in Angular 4

html

javascript

datetimepicker

primeng

angular