javascript - 将 Prime Ng 时间选择器默认设计从向上和向下箭头修改为 Angular 4 中的滑块
问题描述
我们在我们的应用程序中使用 Prime Ng Time Picker。
使用以下代码:
<p-calendar [(ngModel)]="value" showTime="true" hourFormat="24"></p-calendar>
默认情况下,它显示带有向上和向下箭头的时间选择器,用于更改小时和分钟。
我们希望有一个滑动条来分别更改小时和分钟。
我们如何修改日期时间选择器的现有 Prime Ng 代码以获取滑块而不是向上和向下箭头。
解决方案
我能够通过一些调整来实现。在这里发布我的解决方案,以便它可以帮助其他人并且可以改进我的解决方案。
我在. _<p-footer>
_ 在滑块和datetimepicker 上<p-calender>
使用保持 DateTimePicker 和 Slider 同步。使用 Css 隐藏默认 timePicker。onChange
onInput
我的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;
}
工作示例 任何改进将不胜感激。我是 Angular2 的新手 :)
推荐阅读
- python - 调整矩阵,人脸识别
- java - 创建 CustomButton 将 Button 扩展为在 onclick 之前调用的预设条件
- mysql - 如何在同一个选择中以两种不同的方式计算?
- javascript - 为什么不渲染组件子项?
- c++ - 如何返回图中 2 个节点之间所有可能路径的二维数组?(C++)
- python - 找到达到多个级别的方法
- javascript - 调整文本大小后滚动跳转到页面底部
- spring-boot - 不同的执行器(管理服务器)端口更改 HTTP 响应
- python - 未在 python 中执行的所有代码行
- android - 无法运行 expo android apk 构建