To execute the example, connect the PP.js components library and the PP.css visual styles table. See below the Javascript code, using which the date and time editor is located on the HTML page.
<script type="text/javascript">
var date = new Date (2011, 08, 29, 11, 0, 0, 0);//Variable that contains the value of the specified time and date.
var minDate = new Date(2011, 0, 1, 10, 0, 0, 0);//Variable that contains the minimal value of date //and time.
var maxDate = new Date(2011, 11, 31, 19, 0, 0, 0);//Variable that contains the maximal value of date //and time.
DTE = new PP.Ui.DateTimeEdit({//Create an instance of the component.
ParentNode: document.getElementById("DTE1"),//Component identifier that is stored in the //div tag.
CurrentDate: date,//Set the date value.
Width: 150,//The component width.
MinDate: minDate,//Set the minimal value of date and time.
MaxDate: maxDate})//Set the maximal value of date and time.
<script>
After executing the example the date and time editor that looks as follows is located on the HTML page:
NOTE. The month value is set in the range from null to eleven: null is January, eleven is December.
The date and time maximal value that can be set is 19:00 30.12.2011. The minimal date and time values are 10:00 1.01.2011. The indicator of incorrect entry enables when trying to set the value that is more or less than the minimal or the maximal value:
After that when the mouse cursor is out the component area the closest possible value is set in the editor (in this case the maximal possible value is 19:00 31.12.2011).
See also: