Can datetimeinput be only selected, not editable by keyboard? - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: blur, daterange, datetimeinput, focus, jqxdatetimeinput

This topic contains 3 replies, has 4 voices, and was last updated by selva 7 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Can datetimeinput be only selected, not editable by keyboard? Posts
February 13, 2015 at 9:40 am Can datetimeinput be only selected, not editable by keyboard? #67079

yuanru
Participant

Hi,

I need a widget which can only be edited by selecting date. But I didn’t find any option to disable keyboard editing function in datetimeinput.

Thanks!

February 13, 2015 at 1:40 pm Can datetimeinput be only selected, not editable by keyboard? #67091
Nadezhda
Participant
Hello yuanru,

Here is an example which shows how to stop keyboard editing.
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
</head>
<body> 
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {               
                // Create a jqxDateTimeInput
                $("#jqxWidget").jqxDateTimeInput({ width: '250px', height: '25px' });
                $("#inputjqxWidget").focus(function () {
                    $(this).blur();
                });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
February 16, 2015 at 5:52 am Can datetimeinput be only selected, not editable by keyboard? #67157

Peter Stoev
Keymaster

Hi yuanru,

Another solution is to set readonly to true – http://jsfiddle.net/jqwidgets/yv5gR/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

February 16, 2017 at 9:29 am Can datetimeinput be only selected, not editable by keyboard? #91616

selva
Participant

Hi Peter Stoev,

I have two dateTimeInput elements like appointmentStartTime and appointmentEndTime.
My scenario is restrict appointmentEndTime is not less than start time and also not greater than 8 hrs in a same day. And by default user after entering the appointment start time, then appointment End time is auto calculate to 1 hr from the start time. How can i achieve this.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.