代码之家 › 专栏 › 技术社区 › Paul

如何在HTML日期中隐藏“mm/dd/yyyy”占位符

date html

Paul · 技术社区 · 6 月前

我正在为一周中的每一天制作一个带有日期选择器的HTML表单。表格将在最后打印出来。我想在打印页面时隐藏“mm/dd/yyyy”占位符。理想情况下,它仍然会显示在屏幕上,只有在打印时才会隐藏(如果可能的话)。

<table>
 <tr>
  <td><label for="date">Sunday:</label></td>
  <td><label for="date">Monday:</label></td>
  <td><label for="date">Tuesday:</label></td>
  <td><label for="date">Wednesday:</label></td>
  <td><label for="date">Thursday:</label></td>
  <td><label for="date">Friday:</label></td>
  <td><label for="date">Saturday:</label></td>
 </tr>
  <tr>
  <td><input type="date" id="date" name="Sunday"></td>
  <td><input type="date" id="date" name="Monday"></td>
  <td><input type="date" id="date" name="Tuesday"></td>
  <td><input type="date" id="date" name="Wednesday"></td>
  <td><input type="date" id="date" name="Thursday"></td>
  <td><input type="date" id="date" name="Friday"></td>
  <td><input type="date" id="date" name="Saturday"></td>
 </tr>
</table>

enter image description here

我试过了 display:none , visibility:hidden , style="opacity: 0"; 和 value="" 但它们隐藏了整个盒子。我想保留框和日历图标以及所有功能,只需隐藏“mm/dd/yyyy”占位符文本即可。

提前感谢

2 回复 | 直到 6 月前

NVRM 6 月前

可以通过将输入转换为 type=text ,就在印刷之前。

self.onbeforeprint = () => {
  document.querySelectorAll("input[type='date']").forEach(input => input.type = 'text')
}

<table>
 <tr>
  <td>Sunday:</td>
  <td>Monday:</td>
  <td>Tueday:</td>
  <td>Wednesday:</td>
  <td>Thursday:</td>
  <td>Friday:</td>
  <td>Saturday:</td>
 </tr>
  <tr>
  <td><input type="date" id="date" name="Sunday"></td>
  <td><input type="date" id="date" name="Monday"></td>
  <td><input type="date" id="date" name="Tuesday"></td>
  <td><input type="date" id="date" name="Wednesday"></td>
  <td><input type="date" id="date" name="Thursday"></td>
  <td><input type="date" id="date" name="Friday"></td>
  <td><input type="date" id="date" name="Saturday"></td>
 </tr>
</table>

<button onclick="print()">PRINT</button>

-1

Mr. Polywhirl 6 月前

很遗憾,CSS媒体查询在这种情况下不起作用。您必须保存(转换为 text 输入)和恢复(转换回 date 打印时输入)字段。

const beforePrint = (input) => {
  input.dataset.placeholder = input.placeholder;
  input.type = 'text';
  input.placeholder = '';
};

const afterPrint = (input) => {
  input.type = 'date';
  input.placeholder = input.dataset.placeholder;
};

const printableDates = (selectorOrElements) => {
  const targets = typeof selectorOrElements === 'string'
    ? document.querySelectorAll(selectorOrElements)
    : !Array.isArray(selectorOrElements)
      ? [selectorOrElements]
      : selectorOrElements;
  window.addEventListener('beforeprint', () => targets.forEach(beforePrint));
  window.addEventListener('afterprint', () => targets.forEach(afterPrint));
};

printableDates('.date-input');

<table>
  <tr>
    <td>Sunday:</td>
    <td>Monday:</td>
    <td>Tueday:</td>
    <td>Wednesday:</td>
    <td>Thursday:</td>
    <td>Friday:</td>
    <td>Saturday:</td>
  </tr>
  <tr>
    <td><input type="date" class="date-input" name="Sunday"></td>
    <td><input type="date" class="date-input" name="Monday"></td>
    <td><input type="date" class="date-input" name="Tuesday"></td>
    <td><input type="date" class="date-input" name="Wednesday"></td>
    <td><input type="date" class="date-input" name="Thursday"></td>
    <td><input type="date" class="date-input" name="Friday"></td>
    <td><input type="date" class="date-input" name="Saturday"></td>
  </tr>
</table>
<button type="button" onclick="print()">Print</button>

奖金

如果你想用程序生成月份名称,你可以使用 Intl 日期区域设置格式。

const getMonthNames = (options = {}) =>
  (({ locale, mode }) => Array.from({ length: 12 }, (_, i) =>
    new Date(2024, i, 1).toLocaleDateString(locale, { month: mode })))
  ({ locale: "en-US", mode: 'long', ...options });
  
const months = getMonthNames();

document.body.insertAdjacentHTML('beforeend', `
  <table>
    <thead>
      <tr>
        ${months.map(month => `<th>${month}:</th>`).join('')}
      </tr>
    </thead>
    <tbody>
      <tr>
        ${months.map(month => `
          <td>
            <input type="date" class="date-input" name="${month}">
          </td>
        `).join('')}
      </tr>
    </tbody>
  </table>
`);