jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
47 lines (43 loc) • 2.78 kB
HTML
<html lang="en">
<head>
<meta name="keywords" content="jQuery Calendar, Month Calendar, MonthCalendar, DateTimeInput, DateTimePicker, Date Picker" />
<meta name="description" content="Edit time values by setting the jqxDateTimeInput's formatString property to a time format like: 't', 'T' or any custom format.
Set the showCalendarButton option to hide the calendar button."/>
<title id='Description'>
Edit time values by setting the jqxDateTimeInput's formatString property to a time format like: 't', 'T' or any custom format.
Set the showCalendarButton option to hide the calendar button.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css"/>
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.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 () {
$("#dateTimeInput").jqxDateTimeInput({
width: '300px',
height: '25px',
allowNullDate: true,
editMode: 'full',
formatString: 'MM/dd/yyyy HH:mm',
showFooter: true,
value: null,
yearCutoff: 1926
});
});
</script>
<p>This demo demonstrates editMode: "full". In this mode, when the input is empty (value is null), its value can be freely edited. On blur or when Enter is pressed, the value is validated and if it is valid, editing becomes the same as in editMode: "default". If the value is once again set to null (by pressing Delete, Ctrl + A and Delete, or "Clear"), full edit can again be entered. Full edit also takes into consideration the value of the "yearCutoff" property. This means that if yearCutoff is 1926 and 01/01/20 is entered, 20 will be interpreted as 2020; if 01/01/54 is entered, 54 will be interpreted as 1954.</p>
<div id='dateTimeInput'></div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>