how can we disable dd-mm-yyyy field in input type="date" so that only selected date can be accepted

Question

I am using a HTML input element with type as date,

<input
    type="text" 
    placeholder="Date of Appointment" 
    id="appointment_date" 
    name="appointment_date" 
    class="input-sm form-full" 
    required value="<?php if(isSet($_POST["submit"])){echo $_POST['appointment_date'];}?>" 
    onfocusout="(this.type='text')" 
    onfocus="(this.type='date',this.step='0')"
>

When I use the above element it creates a default date format i.e. mm/dd/yyyy text within that input element.

How do I remove this default text?

I want to disable the dd-mm-yyyy step values so only selected date can be taken as input for above code. Please suggest a JS solution for this. I tried adding below style on my page but it is hiding the selected date value as well,

input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

`$('input[type="date"]').setAttribute( "autocomplete", "off" );` is this what you are looking for? — guradio, Aug 13 '19 at 07:36
It's not really obvious why you want to change or hide the placeholder? The value in that text is never sent to the server. Are you asking how to make the field mandatory, or something? It's unclear what the actual problem is — ADyson, Aug 13 '19 at 07:50
Is there any specific reason why you change the type onfocus/onfocusout? Why not make it `type="date"` from the start? — brombeer, Aug 13 '19 at 08:53

score 0 · Answer 1 · answered Aug 13 '19 at 08:25

You can try this one , I hope it will helps with your problem. but this not is not really a Good solution for this kind of problem.

$("#appointment_date").on('focus', function(){
 this.type='date';
});

$("#appointment_date").on('input', function(){
 this.type='text';
});

input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

<input type="text" 
       placeholder="Date of Appointment" 
       id="appointment_date" 
       name="appointment_date" 
       class="input-sm form-full" >

https://jsfiddle.net/4xua73vo/12/

score 0 · Answer 2 · answered Aug 13 '19 at 08:34

From input field, I modified it into a date field.
You can use this plug in directly https://code.jquery.com/jquery-1.12.4.js

<script src="http://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>

or download it and save as

<script src="jquery-1.12.4.js"></script> // downloaded

Then call this function with your input field ID

function fncDate(vID){
    $("#"+vID).datepicker({
        dateFormat : 'mm/dd/yy',
        changeMonth : true,
        changeYear : true,
        yearRange: '-100y:c+nn',
        maxDate: '-1d',
        constrainInput: true
    });
 }

For example:

fncDate("inpDate");// inpDate is the ID of the text field

You can also modify date formats using this function.

I hope this helped.

Ric · Answer 3 · 2020-04-12T15:12:41.020

0

So I ran into this problem myself recently. I am sure OP has found an answer but for those googling, the onchange event is fired upon people clicking the [x] and setting the date to "dd/mm/yyyy".

This means we can do this..

<input type="date" id="myDate" value="2020-01-01" data-default="2019-12-31"/>

..and this...

            document.getElementById("myDate").addEventListener("change",(ev)=>{
                if (ev&&ev.target)
                    if (ev.target.value=="")
                        ev.target.value = ev.target.dataset.default;
            });

edited Apr 12 '20 at 15:12

answered Apr 12 '20 at 14:56

Ric

640
5
10

OK, so this is annoying, this will work in Chrome but not Firefox, *unless* in Firefox you change the date first (from the initial default value) then cancel it. The consistency across the browsers is terrible with this. – Ric Apr 12 '20 at 16:48

score 0 · Answer 4 · answered Jul 25 '23 at 15:13

If you need to hide the 'dd/mm/yyyy' text (preview only)

you can run this code :

var DA = document.querySelectorAll('input[type=date]');
for (let d of DA)
    d.type='';

if there is no value ==> empty field

==>

and if value exists ==> the value still but in different format

==>

how can we disable dd-mm-yyyy field in input type="date" so that only selected date can be accepted

4 Answers4

Linked