Webix window popup with calendar and time picker

PHOTO

Sat May 13 2023 16:24:07 GMT+0000 (Coordinated Universal Time)

Saved by @mindplumber #javascript #webix

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();

COPY

https://snippet.webix.com/f1dnfw4e

Save snippets that work from anywhere online with our extensions

Comments

JavaScript

@mindplumber

Dual listbox example Select2 with FontAwesome Select2 with search icon in placeholder Make Your CSS Dynamic with CSS Custom Properties Building a lightbox with the Dialog element | Polypane, The browser for ambitious web developers Building a dialog component Fixed Table Header Add an image to a PDF document via a REST service Webix setLocale MK Webix window popup with calendar and time picker Node.js: Generate Images from Text Using Canvas - KindaCode Check if library is loaded - load if not How To Set Up A Request Timeout In Axios? Input by shadowmurphy made with CSS | Uiverse.io How to Send Email using Mailgun API in Node.js ? - GeeksforGeeks

#html #javascript #nodejs

How to Save HTML Form Data in JSON - Express

<form action="/new" method="post">
 
  <input name="title" type="text">
  <input name="description" type="text">
  <button type="submit">Submit Form</button>
 
</form>

> More steps

#javascript

Get URL and URL Parts in JavaScript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname + window.location.search

#javascript

Add event listener to multiple buttons with the same class

    btns = document.getElementsByClassName("saveBtn");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function () {
			//Add function here
        });
    }

#javascript

Replace Textarea with Codemirror editor

<link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css">

<body>
	<textarea class="codemirror-textarea"></textarea>
</body>

<script>

$(document).ready(function(){
    var codeText = $(".codemirror-textarea")[0];
    var editor = CodeMirror.fromTextArea(codeText, {
        lineNumbers : true
    });
});

</script>

<script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script>

#javascript #nodejs #commandline

HTTPS Redirect in Nodejs

npm install heroku-ssl-redirect

> More steps

#javascript #nodejs

Save to MongoDB without Duplicates Using Mongoose

var mongoose = require('mongoose');
var Schema = mongoose.Schema;

const exampleSchema = new Schema({
    title: { type: String , required: true},
    content: [{type: String}]
});


var Example = mongoose.model('Example', exampleSchema);
module.exports = Example;

> More steps

#html #javascript #jsfunctions #dom #dommanipulation

getAttribute() - how to get the value of any attribute of HTML element

<html>

<input id="contact" name="address">

<script>

    var x = document.getElementById("contact").getAttribute('name');

</script>

</html>

#javascript

Full Stack Developer

function full_stack_developer() {
    full_stack_developer();
}

#javascript

3 Ways To Detect Selenium Bots Using Javascript - CodingTutz

if (navigator.webdriver) {
    document.body.innerHTML = "This is a Bot";
}

#javascript #promises #howto

How to Get the Domain From A URL Using Javascript

var url = "http://scratch99.com/web-development/javascript/";
var urlParts = url.replace('http://','').replace('https://','').split(/[/?#]/);
var domain = urlParts[0];

#javascript #javascript #functions #parameters

Required Parameters for Functions in JavaScript

 const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// These will throw errors
hello();
hello(undefined);

// These will not
hello(null);
hello('David');
The idea here is that it uses default parameters, like how the b parameter here has a default if you don’t send it anything:
function multiply(a, b = 1) {
  return a * b;
}

#javascript

Mapping an Object

const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

#javascript

Copy Text to Clipboard with Line Breaks

function copyToClipboard(){

    var codeToBeCopied = document.getElementById('code-snippet').innerText;
    var emptyArea = document.createElement('TEXTAREA');
    emptyArea.innerHTML = codeToBeCopied;
    const parentElement = document.getElementById('post-title');
    parentElement.appendChild(emptyArea);

    emptyArea.select();
    document.execCommand('copy');

    parentElement.removeChild(emptyArea);
    M.toast({html: 'Code copied to clipboard'})

    }

#javascript

How to store fetch response in javascript variable - Stack Overflow

async function fun() {
  return fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
}

const data  = await fun();

#javascript #jquery

jQuery.post() - AJAX for post requests

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Webix window popup with calendar and time picker

Save snippets that work from anywhere online with our extensions

Comments

More like this

JavaScript

Browse more snippets >>

Webix window popup with calendar and time picker

Save snippets that work from anywhere online with our extensions

Comments

More like this

JavaScript

Browse more snippets >>

Embed code snippet