function createWindow() { webix.Date.startOnMonday = true; let window = webix.ui({ view: "window", head: "Изберете датум", // Set the window title in Macedonian width: 400, //position: "center", move: false, modal: true, body: { rows: [ { view: "calendar", id: "calendar", timepicker: true, icons: true, weekStart: 1, // 1 represents Monday calendarTime:"%H:%i", format: "%Y-%m-%d %H:%i:%s", events:webix.Date.isHoliday, }, { view: "toolbar", elements: [ { view: "button", value: "Готово", click: function () { var selectedDate = $$("calendar").getValue(); // Get the selected date and time if (selectedDate) { var formattedDate = webix.Date.dateToStr( "%Y-%m-%d %H:%i:%s" )(selectedDate); // Format the date in MySQL format document.getElementById("result").innerHTML = "Selected Date: " + formattedDate; // Display the selected date and time in the result div } window.hide(); // Hide the window when the Done button is clicked } }, { view: "button", value: "Откажи", click: function () { //$$('result').setValue('otkaz'); document.getElementById("result").innerHTML = ""; // Display an empty result in the result div window.hide(); // Hide the window when the Cancel button is clicked } } ] } ] } }); $$("calendar").selectDate(new Date(), true); // Show the window when the HTML button is clicked document.getElementById("show_window").onclick = function () { let button = this; let buttonPos = webix.html.offset(button); window.setPosition(buttonPos.x, buttonPos.y + button.offsetHeight); window.show(); }; } // Call the function to create the window createWindow();
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter