Hi sujitdas001,
You need to make use of jquery.inputmask plugin.
For more details on jquery.inputmask plugin refer the following url.
https://github.com/RobinHerbots/Inputmask
Refer below sample.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
</head>
<body>
Time: <input type="text" name="time" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js"></script>
<script type="text/javascript">
$(function () {
$('input[name=time]').inputmask("datetime", {
mask: "h:s:s",
placeholder: "hh:mm:ss",
alias: "datetime",
autoUnmask: !1
});
});
</script>
</body>
</html>
Screenshot
