This guide demonstrates how to display a date picker, embedded within the window frame container. Resizing the window frame also resizes the date picker proportionately; clicking the date picker logs the event to the console.
<!DOCTYPE html> <!-- Copyright (c) 2026 by Javaika Technologies -->
<html lang = "en-AU"> <!-- Set the primary language to en-AU -->
<head>
<title>Date Picker</title> <!-- Set the page title -->
<meta name = "robots" content = "noindex, follow">
</head>
<body>
<!-- Include the framework script tag -->
<script type = "module" src = "https://www.javaika.com/frame/web-interface@main/api.js"></script>
<!-- Run the demo as an ES Module -->
<script type = "module">
// Initialize a shorter prefix for referencing.
const jwi = window.javaika.webInterface;
let datePickerControl; // Declare date picker control.
// Initialize the developer token endpoint.
jwi.init({
tokenEndpoint: "https://www.javaika.com/pscript/jwt-access.php"
});
// Authenticate before using the framework.
jwi.requestToken({
framework: "web_interface" // Specify the framework for token issuance.
});
// Authenticate callback handler.
function onAuthenticate(event)
{
jwi.refreshToken(); // Refresh the authentication token.
console.log('[Web Interface] Authentication received callback:', event);
}
// Window frame resized callback handler.
function onWindowFrameResized(event)
{
jwi.scaleInterfaceControls(event.detail.scaleFactor);
}
// Date picker initialized callback handler.
function onDatePickerInitialized(event)
{
datePickerControl.setSizeFactor(1.5); // Increase initial size.
datePickerControl.setText("Select Date"); // Set the text.
datePickerControl.setEvent('click', onClick); // Bind click event.
console.log('[Web Interface] Date picker initialized callback:', event);
}
// Click callback handler.
function onClick(event)
{
const text = datePickerControl.getText();
console.log('[Web Interface] Click callback:', event);
console.log('[Web Interface] Date picker text is:', text);
}
// Initialized callback handler.
function onInitialized(event)
{
// Define the controls for the interface.
let windowFrame = new jwi.WindowFrame();
datePickerControl = new jwi.DatePicker();
// Add initial styles for the date picker.
datePickerControl.addStyle('left', '8%');
datePickerControl.addStyle('top', '8%');
// Add date picker component to the window frame.
windowFrame.addDatePickerElement(datePickerControl);
// Enable manual resizing of the container window.
jwi.setContainerManuallyResizable(true);
jwi.setMaintainAspectRatio(true);
// Set handle offsets from the container window.
jwi.setContainerOffsetHeight(50);
jwi.setContainerOffsetWidth(50);
// Render interface to the browser window.
jwi.renderInterface(windowFrame);
console.log('[Web Interface] Framework initialized callback:', event);
}
// Callback event after authenticate.
document.addEventListener
(
'javaika.webInterface.authenticate', onAuthenticate
);
// Callback event after initialized.
document.addEventListener
(
'javaika.webInterface.initialized', onInitialized
);
// Callback event after date picker initialized.
document.addEventListener
(
'javaika.webInterface.datePickerInitialized', onDatePickerInitialized
);
// Callback event after window frame resize.
document.addEventListener
(
'javaika.webInterface.windowFrameResized', onWindowFrameResized
);
</script>
</body>
</html>
/* Standard class styles */
.javaika-date-picker
{
box-sizing: border-box;
align-items: center;
position: absolute;
user-select: none;
border: 1px solid;
border-color: #AAA;
font-size: 16px;
height: 30px;
width: 150px;
display: none;
}
.javaika-date-picker-calendar-header
{
background: linear-gradient(to bottom, #F0F0F0 0%, #F9F9F9 50%, #F0F0F0 100%);
justify-content: space-between;
display: flex;
padding: 0.25em;
}
.javaika-date-picker-calendar-button
{
background: linear-gradient(to bottom, #F0F0F0, #D0D0D0);
border-left: 1px solid;
border-color: #AAA;
box-sizing: border-box;
cursor: pointer;
color: white;
font-size: 0.70em;
padding: 0.50em;
width: 2.40em;
height: 100%;
}
.javaika-date-picker-month-last-nav, .javaika-date-picker-month-next-nav
{
font-family: sans-serif;
cursor: pointer;
padding: 0.31em;
color: #777;
}
.javaika-date-picker-year-last-nav, .javaika-date-picker-year-next-nav
{
font-family: sans-serif;
cursor: pointer;
padding: 0.31em;
color: #777;
}
.javaika-date-picker-days-of-week, .javaika-date-picker-days-of-month
{
grid-template-columns: repeat(7, 2.19em);
text-align: center;
display: grid;
}
.javaika-date-picker-days-of-week .javaika-date-picker-day
{
padding-bottom: 0.25em;
padding-top: 0.25em;
}
.javaika-date-picker-calendar
{
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
background-color: white;
box-sizing: border-box;
position: absolute;
display: none;
border: 1px solid;
border-color: #AAA;
margin-left: -1px;
width: 15.44em;
top: 2.15em;
z-index: 1;
}
.javaika-date-picker-days-of-month
{
border-bottom: 1px solid #F0F0F0;
border-right: 1px solid #F0F0F0;
}
.javaika-date-picker-day
{
border-left: 1px solid #F0F0F0;
border-top: 1px solid #F0F0F0;
padding-bottom: 0.37em;
padding-top: 0.37em;
cursor: pointer;
}
.javaika-date-picker-days-of-week
{
border-top: 1px solid #CCC;
background-color: #F0F0F0;
padding-bottom: 0.25em;
padding-top: 0.25em;
font-size: 1em;
}
.javaika-date-picker-field
{
white-space: nowrap;
text-align: left;
font-size: 1em;
flex-grow: 1;
padding: 0.31em;
}
.javaika-date-picker-calendar-header
{
align-items: center;
display: flex;
gap: 0.62em;
}
.javaika-date-picker-month-container
{
align-items: center;
display: flex;
gap: 0.62em;
}
.javaika-date-picker-year-container
{
align-items: center;
display: flex;
gap: 0.62em;
}
.javaika-date-picker-month-display
{
display: inline-block;
text-align: center;
min-width: 5em;
}
.javaika-date-picker-year-display
{
display: inline-block;
text-align: center;
min-width: 1.87em;
}
.javaika-date-picker-selected
{
background-color: #B9B9B9;
color: white;
}
.javaika-date-picker-grayed-out
{
color: #999;
}
/* Adjoined class styles */
.javaika-date-picker.disabled
{
pointer-events: none;
cursor: not-allowed;
opacity: 0.5;
}
/* Pseudo class styles */
.javaika-date-picker:focus
{
outline: none;
}
.javaika-date-picker:focus-visible
{
outline: 2px solid #809DFF;
outline-offset: 3px;
}
.javaika-date-picker-day:hover
{
background-color: #B9B9B9;
color: white;
}
.javaika-date-picker-calendar-button:hover
{
background: linear-gradient(to bottom, #FAFAFA, #E0E0E0);
}
.javaika-date-picker-calendar-button:active
{
background: linear-gradient(to bottom, #D0D0D0, #F0F0F0);
}
Next capability: Demonstrate how to incorporate a Progress Bar.