0

I am writing a form with a date type and I see that the date input has a standard dd/gg/yyyy that is neither a value nor a placeholder, so something like this

<input type="date" placeholder="Date" value="">

would not work. Moreover,:empty does not work since the field is considered empty even if filled with a value, and hence using input[value=""] and color:transparent would hide the selected value. So one way would be to make the selector :not([value=""]), and this works for other fields adding

value="" onkeyup="this.setAttribute('value', this.value);"

to input, and using selector input[value=""] and input:not([value=""]). However onkeyup does not work on date, so it keeps empty even after chosing a value.

What do you suggest?

Filippo
  • 83
  • 9
  • I think this answers your question: https://stackoverflow.com/questions/28686288/remove-default-text-placeholder-present-in-html5-input-element-of-type-date – Ray May 03 '22 at 12:12

1 Answers1

0
<input type="date" placeholder="Date" onfocus="transform(this)" onblur="revert(this)">
<script>

    document.querySelector('[type=date]').setAttribute('type','text')
    function transform(el){
         el.setAttribute('type','date')
    }
    function revert(el){
        if(el.value == '')
        el.setAttribute('type','text')
    }
</script>

this snippet can help you, it's not actually a solution it's a trick so try other solutions and keep this as your last chance

https://jsfiddle.net/mahdiar_mansouri/zksxe6vc/9/

here is how it works

it just changes input type on blur and focus events from text to date and reverse

====================================

Updated

this snippet also sets the current time of user machine to the input value as default

 document.querySelector('[type=date]').setAttribute('type','text')
 function transform(el){
     el.setAttribute('type','date');
    const [date, time] = formatDate(new Date()).split(' ');
    el.value = date;
 }
 function revert(el){
    if(el.value == '')
    el.setAttribute('type','text')
 }
 function formatDate(date) {
   return (
     [
       date.getFullYear(),
       padTo2Digits(date.getMonth() + 1),
       padTo2Digits(date.getDate()),
     ].join('-') +
     ' ' +
     [
       padTo2Digits(date.getHours()),
       padTo2Digits(date.getMinutes()),      
     ].join(':')
   );
 }
 function padTo2Digits(num) {
   return num.toString().padStart(2, '0');
 }

also the jsfiddle code is updated

https://jsfiddle.net/mahdiar_mansouri/zksxe6vc/16/

Update(based on OP comment

Here is the image and you can see the input[value=""]+label selector won't select adjacent label because input has value

label won't be selected

Mahdiar Mransouri
  • 652
  • 1
  • 4
  • 11
  • If I add a selector :not([value=""]) it still gives an empty value. Did I write the selector wrongly? – Filippo May 03 '22 at 12:58
  • I dont understand. This line ```el.value = date;``` should change value, so why does input[value=""] still passes even if the value now is date? – Filippo May 03 '22 at 13:20
  • the ```date``` variable is calculated based on ```new Date()``` and it has only date(not time) of the client machine and the code will set that value to input,, and this is why ```:not([value=''])``` won't select element , because it has value – Mahdiar Mransouri May 03 '22 at 13:31
  • I am not sure I understood. I added a label in your jsfiddle and used this selector ``` input [value=""] + label ``` to change the label color to red, and it stays red even after selecting a date, so doesnt it mean that the value is still empty? – Filippo May 03 '22 at 13:45
  • Well i just tried what you said and label didn't get selected... I updated the fiddle and I'll add it's image to the answer – Mahdiar Mransouri May 03 '22 at 23:07
  • Thank for answering. What I meant is that in the picture, since the date field is empty, it should have red background, and move to yellow background the moment one value is selected. If you try adding value="" in the input, you will see that it is red initally and will stay red after chosing a value. – Filippo May 04 '22 at 09:01