Измените стандартный дизайн выбора времени Prime Ng со стрелок вверх и вниз на ползунки в Angular 4 - PullRequest
Новая
       8

Измените стандартный дизайн выбора времени Prime Ng со стрелок вверх и вниз на ползунки в Angular 4

0 голосов
/ 10 октября 2018

Мы используем Prime Ng Time Picker в нашем приложении.

Используя следующий код:

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

По умолчанию он показывает время выбора со стрелками вверх и вниз для изменения часа и минут.

Мы хотимиметь ползунки для изменения часов и минут соответственно.

Как мы можем изменить существующий код Prime Ng для выбора даты и времени, чтобы получить ползунки вместо стрелок вверх и вниз.

1 Ответ

0 голосов
/ 14 октября 2018

Мне удалось добиться с некоторыми настройками.Публикация моего решения здесь, чтобы оно могло помочь другим, и мое решение может быть улучшено.

Я использовал ngPrime Slider внутри <p-footer> из <p-calender>.Для синхронизации DateTimePicker и Slider используется onChange на ползунках и onInput на datetimepicker.Используется Css, чтобы скрыть timePicker по умолчанию.

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

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

My app.css : 

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

Рабочий пример Любые улучшения приветствуются.Я новичок в Angular2:)

...