javascript 如何在原生HTML元素中只显示日期图标？

nzk0hqpo 于 2022-11-20 发布在 Java

关注(0)|答案(3)|浏览(155)

不确定是否可以只显示输入类型日期的图标。

<input type="datetime-local" id="test" name="test">

如下面突出显示的，我尝试在Angular材料表行中显示日期选择器（执行*ngFor），并在单击日期图标时触发日期时间。

1.不知道确切的css是删除还是隐藏输入边框，mm/dd/yyyy --：-- --
1.不确定它将如何表现，如果我隐藏其余的元素后，找到适当的CSS。

替代

经过大量搜索，找到了这个alternate package并实现，但它在应用程序内部看起来很奇怪。

所以决定回去使用原生html元素。
有人能帮助我如何只显示日期-时间图标吗？
或者建议我为Angular提供日期时间选择器包？
感谢大家

JavaScript

来源：https://stackoverflow.com/questions/69925623/how-to-show-only-date-icon-in-native-html-element

3条答案

按热度按时间

rjee0c151#

补充我评论
使用ngb-datepicker

<div
    ngbDropdown
    class="form-group"
    placement="bottom-rigth"
    #myDrop="ngbDropdown"
    (openChange)="open($event, dp)"
  >
    <div class="input-group">
      <button
        ngbDropdownToggle
        class="btn btn-outline-secondary calendar"
        type="button"
      ></button>
      <div ngbDropdownMenu>
        <ngb-datepicker
          #dp
          (select)="onDateSelection($event, myDrop)"
          [displayMonths]="2"
          [dayTemplate]="t"
          outsideDays="hidden"
        >
        </ngb-datepicker>
      </div>
    </div>
  </div>

指定物料日期选择器

<button mat-icon-button [matMenuTriggerFor]="appMenu">
  <mat-icon>calendar_today</mat-icon>
</button>
<mat-menu #appMenu="matMenu" class="drop-calendar" >
    <div (click)="$event.stopPropagation()">
        <mat-calendar #calendar (selectedChange)="select($event,calendar)" ></mat-calendar>
    </div>
</mat-menu>

赞(0）回复(0）举报 2022-11-20

ct3nt3jp2#

为了在Chrome Developer Tools中发现-webkit属性，我进入Settings〉Preferences〉Elements，然后选中“Show user agent shadow DOM”。完成此更改后，我选择datetime-local元素，并深入查看底层的div伪元素，通过在页面中添加以下CSS发现，我只能显示日历图标。

input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    /* display: none;
    -webkit-appearance: none; */
    margin:0;
}
input[type="datetime-local"]::-webkit-datetime-edit {
    display:none;
}

其结果是：x1c 0d1x，在用户单击选择日期之前，只显示日历图标。

赞(0）回复(0）举报 2022-11-20

ruarlubt3#

将元素的宽度设置为50px，这样就足以只显示图标，而其余部分将不可见。

赞(0）回复(0）举报 2022-11-20