htmldate

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

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

Solution

  • 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>