How to hide 'mm/dd/yyyy' placeholder in HTML date

Paul
December 10, 2024
44 views
0 votes
2 Answers

I’m making an HTML form with a date picker for each day the week. The form is going to be printed at the end. I want to hide the ‘mm/dd/yyyy’ placeholder when the page is printed. Ideally it would still show on-screen and only hide when printed (if that’s possible).

<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

I’ve tried display:none, visibility:hidden, style="opacity: 0"; and value=""but they hide the entire box. I want to keep the box and calendar icon and all functionality – just hide the ‘mm/dd/yyyy’ placeholder text.

Thanks in advance

Tags: date html

Answers

Unfortunately a CSS media query does not work in the scenario. You will have to save (convert to a text input), and restore (convert back to a date input) the field when printing.

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>

Bonus

If you want to programatically generate the month names, you can do so using Intl date locale formatting.

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>
`);

It could be done by transforming the input into type=text, right before the print.

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>

Please signup or login to give your own answer.

Click here to cancel reply.