Overview
Implementation Example 1 Implementation Example 2
javascript

MFCalendarPopup

This class is here for a simple stand alone function (no additional classes required) that will present a simple calendar popup and allow the user to select a date from it.

DEMO
The following example shows clicking on the button triggering the calendar using the following code:

js
function doCalendarPopup(el, cb) {
    if ( el.target ) el=el.target;
    let t = el.getAttribute('data-target-date');
    if ( t ) el = document.getElementById(t);
    const d = el.value ? new Date(el.value) : new Date();
    var popup = new MFCalendarPopup();
    popup.getDate(el, d);
}


html
<input type='text' id='my-calendar-demo' class='' style='width:fit-content; max-width:calc(100% - 50px)'> 
<button onclick='doCalendarPopup(this)' data-target-date='my-calendar-demo'  class='material-icons' style='width: fit-content;max-width: 47px;padding: 7px;min-width: 35px;vertical-align: sub;margin-left: 5px;border-radius: 7px;cursor: pointer;'>calendar_today</button>

    Runtime: Select a date using the MFCalendarPopup : :

The key to the calendar is to trigger it using the js from the html:

html
<input type='text' id='logdate' value='' onclick='doCalendarPopup(this)'>


js
function doCalendarPopup(destElem) {
    let defaultDate = new Date();
    var popup = new MFCalendarPopup();
    popup.getDate(destElem, defaultDate);
    //or
    //popup.getDate(destElem, defaultDate, callbackFunction);
}

If you do not supply the callbackFunction then the result in yyyy-mm-dd format will be placed inside the destElem field, otherwise this will be passed to the callbackFunction to handle manually:

js
function myCallback(selectedDate, destElem) {
    const formattedDate = selectedDt.toISOString().split('T')[0];
...
}

Implementation Example 1

Implementation is simple:

html
<script src='https://methodfish.com/Download/MFCalendarPopup/files/latest/js/mf-calendar-popup.js'></script>
<link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFCalendarPopup/files/latest/css/mf-calendar-popup.css'>


js
// usage: new MFCalendarPopup().getDate(caller-elem, default-date, callback-function)
var _popup = new MFCalendarPopup();
_popup.getDate(e.target, new Date(), setDate);


function closePopup() {
   _popup.removePopup();
}

function setDate(dt) {
   alert('Date set to '+dt);
}

(e.target is the triggering button - or the date input field - and allows the popup to know where to position itself)

To close the popup using javascript, either use _popup.removePopup(), or remove the .mf-calendar-popup element directly.

Implementation Example 2

Include the scripts as seen in Example 1

html
<script src='https://methodfish.com/Download/MFCalendarPopup/files/latest/js/mf-calendar-popup.js'></script>
<link rel='stylesheet preload prefetch' as='style' href='https://methodfish.com/Download/MFCalendarPopup/files/latest/css/mf-calendar-popup.css'>


html
<input type='date' id='myDate' value='' onclick='doCalendarPopup(this, setLogDt)'>


js
function doCalendarPopup(el, cb) {
    if ( el.target ) el=el.target;
    var _popup = new MFCalendarPopup();
    _popup.getDate(el, new Date(), cb);
}
function setLogDt(newdt, destEl) {
    const formattedDate = newdt.toISOString().split('T')[0]; // Extract yyyy-mm-dd format
    destEl.value = formattedDate;
}

link Click to view a demo

square

About

License

Latest Release

Version 1.038 weeks ago

Also see

articles/Implementing-a-Monaco-Editorsquarearticles/iConnectionTestsquarearticles/javascript-camerasquarearticles/list-editsquarearticles/minifierssquarearticles/opayosquarearticles/table-drag-sortersquarearticles/typewatchsquareprojects/MFCalendarPopupsquareprojects/MFChartColumnsquareprojects/MFColorPickersquareprojects/MFColorPickerBasicsquareprojects/MFColumnDataBarsquareprojects/MFColumnGradientsquareprojects/MFCropCornerUIsquareprojects/MFFloatawayMsgsquareprojects/MFPanelssquareprojects/MFSelectorsquareprojects/MFShowConsolesquare
PrivacyCookies