javascript - 我们如何在输入类型=“日期”中禁用dd-mm-yyyy字段，以便仅接受选定的日期

我正在使用类型为日期的HTML输入元素，

<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')"
>

当我使用上述元素时，它会创建一个默认的日期格式，即该输入元素中的mm / dd / yyyy文本。

如何删除此默认文本？

我想禁用dd-mm-yyyy步骤值，因此只能将选定的日期作为上述代码的输入。请为此提出一个JS解决方案。
我尝试在页面上添加以下样式，但它也隐藏了所选的日期值，

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;
}

最佳答案

您可以尝试这一方法，希望对您的问题有所帮助。但这不是解决此类问题的好方法。

$("#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/