We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Removing calendar icon from DateTimePicker


In my appointment window I don't want user to select the date, only the hour. So, I did this on the StartTime property:

                var startElement = args.element.querySelector('#StartTime');
                if (!startElement.classList.contains('e-datetimepicker')) {
                    new ej.calendars.DateTimePicker({
                        strictMode: true,
                        value: new Date(startElement.value) || new Date(),
                        format: 'HH:mm',
                        change: function () {
                            if (typeof (document.getElementById("StartTime_Error")) !== 'undefined') {

                                if (document.getElementById("StartTime_Error")) {
                                    document.getElementById("StartTime_Error").style.display = "none";
                    }, startElement);

But the calendar icon still appears on the DateTimePicker. Is it possible to remove it?

Thank you very much.

3 Replies

KK Karthigeyan Krishnamurthi Syncfusion Team January 4, 2019 04:52 AM UTC

Thank you for contacting Syncfusion support. 
Kindly use the below CSS to hide the DatePicker control and for the same we have prepared the below sample. 
    span.e-input-group-icon.e-date-icon.e-icons { 
        display: none; 

GP Gregory Perozzo January 4, 2019 07:49 PM UTC

Hello Karthigeyan!

Perfect!!! Working 100%.

Thank you very much.

KK Karthigeyan Krishnamurthi Syncfusion Team January 7, 2019 03:45 AM UTC

We are happy that our solution fulfilled your requirement. 

Live Chat Icon For mobile
Up arrow icon