html - 如何在 Angular 中创建年份微调器

问题描述

我是 Angular 的新手。我正在Angular 6和一个团队一起做一个项目。但是有一个主要限制是我不允许使用任何 3rd 方库。甚至没有bootstrap，font-awesome或primeng。需要一个time-selection带有的小部件month-range-picker，所以我从头开始创建了一个自定义组件，它看起来不错。看：

我从头开始创建的整个时间选择器小部件，在右侧，我正在谈论仅一个月的范围选择器。到目前为止，我在没有外包任何框架或库的情况下实现了这一点，但现在我有一个障碍。看看year spinner。看起来很可怜。我想要完全一样。例如：

我用红色圈起来的那个。带左右导航器。大多数解决方案要么使用，要么使用jquery一些外部libraries. 请帮助我用纯 HTML、CSS 和 Angular 实现这一目标。

我已经尝试过这个和许多其他解决方案，但正如我所说，他们主要使用 jquery。我还创建了一个最小的堆栈闪电战。请帮我。

标签： htmlcssangular

好的，感谢您在这个问题上的宝贵时间。同时，就像整个小部件一样，我也是从头开始创建的。这是一个屏幕截图：

保持项目简单和代码干净。我year-navigator完全创建了一个新的自定义组件。

这是代码。

yearnavigator.component.html

<div class="super-div">
    <table style="width:100%">
        <tr>
            <td><i class="iconfont left-arrow" (click)="decrementYear()">&#xf15f;</i></td>
            <td>
                <pt-label class="current-year">{{year}}</pt-label>
            </td>
            <td><i class="iconfont right-arrow" (click)="incrementYear()">&#xf160;</i></td>
        </tr>
    </table>
</div>

yearnavigator.component.ts

import { Component, OnInit } from '@angular/core';
import './yearnavigator.component.css';

@Component({
  selector: 'app-yearnavigator',
  templateUrl: './yearnavigator.component.html'
})
export class YearnavigatorComponent {

  dt = new Date( );

  year: number=this.dt.getFullYear();

  constructor() { }

  decrementYear() {
    this.year=(this.year)-1;
    console.log("clicked");
  }

  incrementYear() {
    this.year=(this.year)+1;
    console.log("clicked");
  }
}

yearnavigator.component.css

.iconfont {
    font-family: "dls-images" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.super-div {
    /* background: crimson; */
    width: 327px;
    text-align: center;
    margin-top: 20px;
}

.current-year {
    font-size: 20px;
    color: #2B86B2;
    vertical-align: middle;
}

.left-arrow,
.right-arrow {
    color: #2B86B2;
    font-size: 20px;
    vertical-align: middle;
}

.left-arrow:hover,
.right-arrow:hover {
    cursor: pointer;
}

PS： iconfont来自我们自己的图标库。您可以使用任何其他库。这只是一个图标的东西。

请随时发布更好的答案。我知道我是一个可悲的编码员。:-(

html - 如何在 Angular 中创建年份微调器

问题描述

解决方案

推荐阅读