Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
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