如何制作简单的日期选择器答案

【问题标题】：How to make simply date picker如何制作简单的日期选择器
【发布时间】：2019-08-04 17:36:49
【问题描述】：

此时在我的 html 中有这样的内容：

<div class="label">Date of birth</div>
  <div class="d-flex">
    <div class="form-group col-md-4">
      <select id="inputState" class="form-control margin-no-left">
        <option selected>Day</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>
        <option>13</option>
        <option>14</option>
        <option>15</option>
        <option>16</option>
        <option>17</option>
        <option>18</option>
        <option>19</option>
        <option>20</option>
        <option>21</option>
        <option>22</option>
        <option>23</option>
        <option>24</option>
        <option>25</option>
        <option>26</option>
        <option>27</option>
        <option>28</option>
        <option>29</option>
        <option>30</option>
        <option>31</option>    
      </select>
    </div>
    <div class="form-group col-md-4">
      <select id="inputState" class="form-control margin-left">
        <option selected>Month</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>   
      </select>
    </div>
    <div class="form-group col-md-4">
      <select id="inputState" class="form-control margin-left-double">
        <option selected>Year</option>
        <option>1984</option>
        <option>1985</option>
        <option>1986</option>
        <option>1987</option>
        <option>1988</option>
        <option>1989</option>
        <option>1990</option>
        <option>1991</option>
        <option>1992</option>
        <option>1993</option>
        <option>1994</option>
        <option>1995</option> 
        <option>1996</option>
        <option>1997</option>
        <option>1998</option>
        <option>1999</option>
        <option>2000</option>
        <option>2001</option>
        <option>2002</option>
        <option>2003</option>
        <option>2004</option>
        <option>2005</option>
        <option>2006</option>
        <option>2007</option> 
        <option>2008</option>
        <option>2009</option>
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
        <option>2015</option>
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
        <option>2019</option>   
      </select>
    </div>
  </div>
  <div class="form-group col-md-4">
    <label></label>
    <select id="inputState" class="form-control">
      <option selected>Country</option>
      <option>Australy</option>
      <option>Austria</option>
      <option>Belgium</option>  
      <option>Canada</option>
      <option>France</option>
      <option>Germany</option>
      <option>Holland</option>
      <option>Italy</option>
      <option>Poland</option>
      <option>Spain</option>
      <option>United Kingdom</option>
      <option>United States</option>  
    </select>
  </div>

这个实现需要很多代码，有人可以告诉我如何制作更简单的生日选择器吗？我只是想尽可能简单 - 没有任何选择日期的窗口。我也想知道几个月 - 其中一些有 31 天，一些 30、29、28 - 如何防止选择不需要的值？

【问题讨论】：

是什么阻止您使用<input type="date">？
@AnuragSrivastava caniuse.com/#feat=input-datetime
在主流浏览器中表现出相当不错的支持，除了已知已经过时的 IE 和 Safari。无论如何，OP 都没有提到浏览器支持，所以我看不出该链接的相关性。
@AnuragSrivastava 因为在我看来选择器很丑，我不想像这样实现它或自己设置选择器的样式。

标签： html angular forms

【解决方案1】：

如果您使用 Angular，请将日期、月份、年份和国家/地区的值保存在组件 ts 中的单独数组中。使用 ngFor 将它们循环到组件 html 中p>

例如，组件 ts,

this.dropdowns = [1, 2, 3, 4, 5];

组件 html，

<select>
    <option *ngFor='let item of dropdowns'>{{item}}</option>
</select>

上面应该为您呈现一个输出 html，

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

在上述格式中，您可以更新您的下拉列表..

【讨论】：

【解决方案2】：

在自己的 Materia Angular 或 ng-bootstrap 中有一个很棒的日期选择器。但是如果你想自己做一个，首先使用数组

假设您有一个数组，如下所示：

months= [
      {name:"January",days:31},
      {name:"February",days:28},
       ...
      {name:"December",days:31}
    ]

由于 Angular 必须遍历数组，我们将得到一个傻瓜数组。并添加一个 initialYear 和一个对象“日期”，我们将在其中存储变量

foolArray=new Array(31)
initialYear=new Date().getFullYear()-20;
date={day:1,month:0,year:this.initialYear}

最后我们需要两个函数，一个是检查年份是否是闰年，另一个是检查日期是否有效

  isLeap(year:number)
  {
    return new Date(year,1,29).getMonth()==1
  }
  checkDate()
  {
    let date=new Date(this.date.year,this.date.month,this.date.day);

    if (date.getMonth()!=this.date.month)
    {
      this.date.day=this.date.month==1?
          this.isLeap(this.date.year)?29:28:
          this.months[this.date.month].days
    }
  }

好吧，我们将使用 [(ngModel)] 来放置所有选择。但是我们需要记住一个选择返回一个字符串，所以我们将在 [ngModel] 和 (ngModelChange) 中分离“香蕉符号”

<select [ngModel]="date.day" (ngModelChange)="date.day=+$event">
  <option *ngFor="let t of foolArray| slice : 0 :months[date.month].days;let i=index">{{i+1}}</option>
  <option *ngIf="date.month==1 && isLeap(date.year)">29</option>
</select>
<select [ngModel]="date.month" (ngModelChange)="date.month=+$event;checkDate()">
  <option *ngFor="let month of months;let i=index" [value]="i">{{month.name}}</option>

</select>
<select [ngModel]="date.year" (ngModelChange)="date.year=+$event;checkDate()">
  <option *ngFor="let month of foolArray;let i=index" >{{i+initialYear}}</option>
</select>

了解如何使用切片管道来显示月份中的日期，以及如果是闰年并且我们在“二月”，如何添加 29。是的。我们需要考虑的另一件事是，我使用 0 表示 1 月，1 表示 2 月...

这允许像 getter 中的函数一样

  get Date()
  {
    return new Date(this.date.year,this.date.month,this.date.day)
  }

以 Date javascript 对象的方式返回我们的日期。

见stakblitz

注意：Perhafs 很有趣地将我们的组件转换为实现 ControlAntecesor 的自定义表单控件

【讨论】：