Enter only Time in TextBox using jQuery in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

how to enter time format in textbox not used validation, but using JavaScript with in cssclas="" in textbox

Just only enter time format like 01:22  --> format HH:MM 

Posted one month ago Modified on one month ago

Hi ahmadlubiss,

Use jQuery datePicker or Bootstrap DateTimePicker plugin.

Refer below sample.

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript">
        $(function () {
            $('[id*=txtjQueryTime]').timepicker({
                timeFormat: 'HH:mm',
                interval: 15,
                dynamic: false,
                dropdown: true,
                scrollbar: true
            });
            $('[id*=txtBootstrapTime]').datetimepicker({
                format: 'HH:mm'
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class='col-sm-4'>
                <h4>jQuery Time picker</h4>
                <input name="txtjQueryTime" type="text" id="txtjQueryTime" />
            </div>
            <div class='col-sm-4'>
                <h4>Bootstrap Time picker</h4>
                <input name="txtBootstrapTime" type="text" id="txtBootstrapTime" />
            </div>
        </div>
    </div>
</body>
</html>

Demo