您现在的位置是:首页 > 正文

Angular 2.x折腾记 :(6) 动手实现只有年月的小组件

2024-02-29 11:34:57阅读 0

前言

这个组件实现并不是很复杂,我会尽量注释;

这货诞生的理由就是项目刚好有一个地方必须只能选择年月,

githubng2+日期组件都涉及到年月日或时分秒;

效果用gifcam录制的,色彩有些失真,将就吧。

效果图

实现思路

  1. 月份只有十二个,只要把个位数做好补位就好
  2. 年份的生成是可控的(传参),当前年份往前推几年和往后推几年构成;
  3. 数据遍历结构很简单
{
   
    date:2017, // 月份是字符串,年份是数字
    active:false,
    type:'year' // 月份是'month'
}

页面样式就自行折腾啦,我这里只是用了最直白粗暴的下拉滑动

实现代码

html

<div class="only-year-month-select">
  <div class="select" (click)="isExpand = !isExpand">
    <input type="text" [placeholder]="placeholder" class="form-control" [(ngModel)]="selected" [disabled]="true">
  </div>
  <div class="list-menu" 

网站文章

  • Vue中如何根据svg内容显示图片

    Vue中如何根据svg内容显示图片

    概述 在写前端项目中,我们免不了需要在页面上显示图片,有的是静态图片,需要直接访问项目内的文件;有的需要从后端接口动态获取图片信息,再在页面上显示。 因为svg图片有:矢量图形,不受像素影响;SVG的...

    2024-02-29 11:34:28
  • 箭头函数:

    箭头函数表达式更适用于那些本来需要。的地方,并且它不能用作构造函数。更简洁,并且没有自己的。

    2024-02-29 11:34:21
  • linux中普通用户修改密码出现(passwd:Authentication token manipulation error)

    linux中普通用户修改密码出现(passwd:Authentication token manipulation error)

    linux中普通用户修改密码出现(passwd:Authentication token manipulation error)

    2024-02-29 11:34:15
  • MWORKS.Sysplorer前瞻版功能简介——状态机图形建模

    MWORKS.Sysplorer前瞻版功能简介——状态机图形建模

    本文简述了状态机建模相比于传统的使用代码实现功能的优势,并介绍MWORKS.Sysplorer针对状态机图形化建模需求。

    2024-02-29 11:33:47
  • gauge自动化框架踩坑(三):上下文

    gauge自动化框架踩坑(三):上下文

    一. 模板项目姑且将模板中的项目成为为模板项目。上篇文章说过,这是一个关于英语中元音的项目,统计单词中包含几个元音二. Contexts注意到,example.spec文件中有下面几行,第11行的step表示上下文step上下文,官网给出的解释是,一个或多个Context step位于一个spec文件中所有场景的前面。它是执行场景所必须的一个环节,上下文可...

    2024-02-29 11:33:40
  • 【随笔三】一篇文章理清 节流、防抖以及应用场景

    【随笔三】一篇文章理清 节流、防抖以及应用场景

    防抖 和 节流 很多人特别容易把概念混倄,今天,一篇文章教你彻底理清其中的概念及应用场景。 先说共同点 防抖 和 节流 函数都是为了 限制函数的执行频次,从而优化函数触发频率过高导致的响应速度跟不上触...

    2024-02-29 11:33:32
  • UML类图关系与符号简介

    UML类图关系与符号简介

    UML-Unified Model Language 统一建模语言,是在开发阶段,说明、可视化、构建和书写一个面向对象软件的开放方法。统一建模语言(UML)是一种模型化语言。模型大多以图表的方式表现出...

    2024-02-29 11:33:26
  • windows无法格式化u盘_u盘无法格式化怎么办 DOS下u盘格式化方法【详解】

    windows无法格式化u盘_u盘无法格式化怎么办 DOS下u盘格式化方法【详解】

      大家都知道,现在很多人都会使用U盘,但是不知道是因为不当的操作还是其他的原因,导致U盘就无法格式化。,如果在图形化界面格式化不了的,可以在DOS下进行格式化,DOS下一般情况都可以被格式化掉,下面...

    2024-02-29 11:32:57
  • Go 交叉编译

    Go交叉编译Go在1.5版本中改进了对交叉编译的支持,包括统一了编译器、链接器等。使得跨平台交叉编译相当简单,一条命令即能轻松搞定。

    2024-02-29 11:32:51
  • 大数据开发:Hadoop入门学习路线

    大数据开发:Hadoop入门学习路线

    学习大数据,核心重点就是对于专业技术的掌握,我们判断一个机构的课程是否具备足够的专业度,也往往是从这些核心技术体系的课程规划来看的。以Hadoop来说,这是大数据学习当中必不可少的部分。今天大数据学习...

    2024-02-29 11:32:46