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

Question

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

我从头开始创建的整个时间选择器小部件，在右侧有一个我正在谈论的仅限月份的范围选择器。到目前为止，我在没有外包任何框架或库的情况下取得了这么多成就，但现在我遇到了障碍。看year spinner .看起来很可怜​​。我想要的正是这样。例如:

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

我试过了 this和许多其他解决方案，但正如我所说，他们主要使用 jquery。我创建了一个最小的 stackblitz还。请帮助我。

Answer 1

好的伙计们，感谢您抽出宝贵时间回答这个问题。与此同时，就像整个小部件一样，我也是从头开始创建的。这是一个屏幕截图:

保持元素简单和代码整洁。我创建了一个新的自定义 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 来 self 们自己的图标库。您可以使用任何其他库。这只是一个图标。

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