Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

How to disable datepicker textfield?

Avatar

Level 5

Hi,

 

I'm using datepicker in my component and I have given minDate as today in properties which works fine by disabling the previous days. How to disable the textfield so that author won't be enter the date but only pick the date from datepicker.

screenshot-localhost_4502-2022.04.29-15_29_27.png

 

Thank you 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

You may have to write a custom logic to disable keyborad input to input text field

https://stackoverflow.com/questions/29715655/html-5-input-type-date-disable-keyboard-input

 



Arun Patidar

View solution in original post

6 Replies

Avatar

Correct answer by
Community Advisor

Hi,

You may have to write a custom logic to disable keyborad input to input text field

https://stackoverflow.com/questions/29715655/html-5-input-type-date-disable-keyboard-input

 



Arun Patidar

Avatar

Level 1
$("#birthdate").datepicker({
        dateFormat: 'dd-mm-yyyy',
        maxDate: new Date()
    });
 
How can i disable this date picker from users manually typing

Avatar

Community Advisor

If you are using the Coral datepicker then you can use readonly flag.

https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/Coral.Datep... 

var datepicker = new Coral.Datepicker().set({
placeholder: "Choose a date",
name: "field",
value: "2015-01-15",
valueFormat: "YYYY-MM-DD",
displayFormat: "YYYY-MM-DD",
startDay: "0",
readOnly: true
});



Arun Patidar

Avatar

Level 1
<div class="col-md-6">
                                <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                                <label class="input-group-text">Birthdate<span class="important">*</span></label>
                                            </div>
                                    <input required="" data-language='en' name="birthdate" type="text" id="birthdate" data-date-format="dd MM yyyy"
                                        class="form-control" value="{{ old('birthdate') }}" placeholder="DD-MM-YYYY" readonly style="background-color:#fff; cursor:auto" >
                                </div>
                            </div>
                    </div>
 <script>
//DatePicker
    $("#birthdate").datepicker({
        dateFormat: 'dd-mm-yyyy',
        maxDate: new Date()
    });
</script>
 
 
Thats how it looks like......the input field and the datepicker