有什么方法可以在不使用有角度的材质或引导程序的情况下进行自定义日期选择器? [英] Is there any way I can make custom datepicker without using angular material or bootstrap?

问题描述

我需要在不使用Angular Material或bootstrap的情况下以角度进行日期选择，如下图所示:

I am required to make datepicker in angular without using Angular Material or bootstrap like in the image below:

我如何使之成为可能?

ps-业务需求.

推荐答案

我想这只是一个遗言，所以只有几点

I supouse it's only an execise, so only a few points

一个日历只有两个* ng用于污染

A calendar are only two *ngFor contatenates

<div class="week" *ngFor="let week of days">
  <div class="day" [class.muted]="!day.isMonth" *ngFor="let day of week">
    {{day.day}}
    </div>
</div>

其中天是一个数组[6] [7]

where days is an array [6][7]

数组的第一个索引从0到5，第二个索引从0到6

the first index of the array go from 0 to 5 and the second from 0 to 6

您可以使用两个辅助功能:

You can use two auxiliar functions:

  private getIncrement(year: number, month: number): number {
    let date = new Date("" + year + "-" + month + "-1");
    let increment = date.getDay() > 0 ? date.getDay() - 2 : 5;
    return increment;
  }

  private getDate(
    week: number,
    dayWeek: number,
    year: number,
    month: number,
    increment: number
  ) {
    let date: any;
    let day = week * 7 + dayWeek - increment;
    if (day <= 0) {
      let fechaAuxiliar = new Date("" + year + "-" + month + "-1");
      date = new Date(
        fechaAuxiliar.getTime() + (day - 1) * 24 * 60 * 60 * 1000
      );
    } else {
      date = new Date("" + year + "-" + month + "-" + day);
      if (isNaN(date.getTime())) {
        let fechaAuxiliar = new Date("" + year + "-" + month + "-1");
        date = new Date(
          fechaAuxiliar.getTime() + (day -1) * 24 * 60 * 60 * 1000
        );
      }
    }
      return {
        date:date,
        day:date.getDate(),
        isMonth:date.getMonth()==month-1
      };
  }
}

当您有一个月和一年的时间时，计算增量，然后创建几天的formArray

When you has a month and a year, calculate the increment, then create the formArray of days

private generateDays(year:number,month:number)
{
  const increment=this.getIncrement(year,month)
  const days=[];
  [0,1,2,3,4,5].forEach((x,index)=>
  {
    days.push([])
    for (let y=0;y<7;y++){
      days[index].push(this.getDate(x,y,year,month,increment))
    }
  })
  return days
}

更新:我附加了 更新2020年4月23日 :，更改月份时已更正

Update 23-april-2020:, corrected when change the month

注意:这只是制作日历的方式，您需要将div设置为可见/不可见，在日历中标记所选的日期...

NOTE: It's only how make a calendar, you need put in a div that becomes visible/invisible, mark the selected day in calendar...

这篇关于有什么方法可以在不使用有角度的材质或引导程序的情况下进行自定义日期选择器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！