HTML 原生 <input type="date">- 更改日期选择器位置答案

【问题标题】：HTML native <input type="date">- change date picker positionHTML 原生 <input type="date">- 更改日期选择器位置
【发布时间】：2021-08-10 06:29:18
【问题描述】：

我正在使用 HTML 本地输入日期（这个 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date），但在 Safari (macOS) 中，我的日期选择器呈现在屏幕外。我怎么能， (a) 禁用日期选择器或 (b) 将其位置更改为显示在输入日期文本字段的顶部。

代码：

* {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    
    html,
    body {
      background-color: #000000;
    }
    
    #content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 16px;
    }
    
    #actionHolder {
      width: auto;
      height: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      position: fixed;
      bottom: 0;
      right: 0;
      margin: 16px;
    }
    
    input {
      width: auto;
      padding: 16px;
      margin: 4px;
    }
    
    /* ::-webkit-calendar-picker-indicator {
      display: none;
    } */
    
    button {
      width: auto;
      height: auto;
      padding: 16px;
      margin: 4px;
      background-color: #e0e0e0;
    }

<body>
    <script src="js/script.js"></script>
    <div id="content">
        <div id="actionHolder">
            <input type="text" id="content">
            <input type="date" id="date">
            <button onclick="toggleOnClick()">Toggle</button>
            <button onclick="addOnClick()">Add</button>
        </div>
    </div>
</body>

在全页模式下查看 sn-p 以了解问题（Safari、macOS）

【问题讨论】：

这能回答你的问题吗？ Bootstrap DatePicker Position
@SimoneRossaini 不使用 Bootstrap DatePicker，使用本机输入日期-developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
请发布您的代码，而不仅仅是图片。
@SimoneRossaini 完成
js/jquery小姐，请补充

标签： html css input

【解决方案1】：

更改日期选择器位置首先设置它的最终宽度例如。宽度：100px 或 10em 或 10vw 或任何固定的那么样式就在这里

#date{
    width:200px;
}    
#date::-webkit-datetime-edit-month-field { display:none;}
#date::-webkit-datetime-edit-day-field { display:none; }
#date::-webkit-datetime-edit-year-field { display:none; }
#date::-webkit-calendar-picker-indicator { margin-right:100px}

最后你可以使用::-webkit-calendar-picker-indicator { margin-right:100px}this 并设置边距来移动这里和那里

【讨论】：

嗨 Lalan，我不想隐藏日、月和年字段。此外，我想移动单击日历选择器指示器后打开的日历的位置，而不是指示器本身。