xxxxxxxxxx
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
xxxxxxxxxx
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: "dd/mm/yy", // Set the date format
showButtonPanel: true, // Show a button panel with today and done buttons
minDate: new Date(), // Set the minimum selectable date to today
maxDate: "+1w", // Set the maximum selectable date to one week from today
showOtherMonths: true, // Show dates from other months as well
selectOtherMonths: true, // Allow selecting dates from other months
changeMonth: true, // Show dropdown to select month
changeYear: true // Show dropdown to select year
});
});
xxxxxxxxxx
$('.timepicker').timepicker({
timeFormat: 'h:mm p',
interval: 15,
minTime: '10',
maxTime: '6:00pm',
defaultTime: '11',
startTime: '10:00',
dynamic: false,
dropdown: true,
scrollbar: true
});