Using css to handle date selection in edit-text without displaying text

Create an entry, either in the form of adding $:/tags/Stylesheet tags, or wrapped in a block of style tags. Copy the code below over. Then write a widget with the following code as well.

/* Stylesheet for date input box under specific style */
.specific-container input[type="date"] {
  color: transparent; /* Hide text */
  position: relative;
  padding-right: 5px;
  padding-left: 5px;
}

/* Show placeholder text */
.specific-container input[type="date"]::before {
  content: attr(placeholder);
  color: #999; /* Placeholder text colour */
  position: absolute;
  left: 0px;
  top: 0%;
  transform: translateY(-50%);
  pointer-events: auto;
  display: block;
}

/* Clear browser default style (cross-platform compatibility) */
.specific-container input[type="date"]::-webkit-datetime-edit,
.specific-container input[type="date"]::-webkit-inner-spin-button,
.specific-container input[type="date"]::-webkit-clear-button {
  display: none;
}

.specific-container input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 1; /* Retain calendar icon */
  position: relative;
  z-index: 1;
}
<div class="specific-container" >
<$edit-text tiddler="AppSettings" field="myconfig" type="date" /><p/>
</div>

Now you get a button like editor. But it’s not a real button and may need styling tweaks. I’m not a CSS expert, this is the answer given by AI, but it’s really good. You can change the css class name to whatever you like.