z00l.de – Merkenswertes(?) und anderes Geraffel

Snippets aus der Welt des Programmierens – manchmal auch OT

Zebra Datepicker Erweiterung —

So, heute geht es mal um eine kleine Erweiterung, die ich für den wirklich guten javascript-datepicker

Zebra Datepicker

von Stefan Gabos geschrieben habe. Diese Erweiterung hilft dabei, ein kleines Problem zu beheben, das immer dann auftrat, wenn sich das Kalender-Icon durch Veränderungen an der Dokumentstruktur vom richtigen Platz wegbewegt hat.

Alle hier beschriebenen Änderungen beziehen sich auf die aktuelle Version 1.5, bei späteren Versionen wird es hoffentlich eine ähnliche Funktionalität geben 😉

Zunächst muss am Ende der Optionsdefinition (Z. 178) folgende Erweiterung eingefügt werden:

// optional placement of the icon and the calendar relative to the input element
// default value is false
sticky_position:    false,

//  the offset, in pixels (delta-right, delta-top), to shift the trigger icon 
//  position relative to its original position
//  default is [3, 0]
icon_offset:        [3, 0]

Als nächstes wird Zeile 600 erweitert:

if (!plugin.settings.always_visible) {

zu

if (!plugin.settings.always_visible) {
  if (!plugin.settings.sticky_position) {

und schliesslich der eigentliche Code ab Zeile 674:

                else // use sticky_postion! 2012-10-10 by Christian Loose (z00l.de)
{
    if (!update) {
        // create the calendar icon (show a disabled icon if the element is disabled)
        var html_icon = '<button type="button">Pick a date</button>';
        var html_icon_wrapper = '<span style="position:relative;width:0;height:0;overflow:visible;
border:none;padding:0;margin:0;"></span>';

        // convert to a jQuery object
        icon = $(html_icon);
        var icon_wrapper = $(html_icon_wrapper);
        icon_wrapper.append(icon);

        // a reference to the icon, as a global property
        plugin.icon = icon;

        // by default, only clicking the calendar icon shows the date picker
        // if text box is read-only, clicking it, will also show the date picker

        // attach the click event
        (plugin.settings.readonly_element ? icon.add($element) : icon).bind('click', function(e) {

            e.preventDefault();

            // if element is not disabled
            if (!$element.attr('disabled'))

                // if the date picker is visible, hide it
                if (datepicker.css('display') != 'none') plugin.hide();

                // if the date picker is not visible, show it
                else plugin.show();

        });

        // inject the icon into the DOM
        icon_wrapper.insertAfter(element);

        icon.css({
            'right': plugin.settings.icon_offset[0],
            'top': plugin.settings.icon_offset[1]
        });
    }
}

 

Das wars auch schon. Der ganze Code kann hier heruntergeladen werden. Benutzt wird der Kalender dann z.B. so:

        $('#tbx_fromdate').Zebra_DatePicker({ 
            show_week_number: "KW",
            offset: [20, 125],
            sticky_position:true
        });

Achso, noch etwas: Wenn das Icon im IE7 nicht so ganz richtig sitzt, kann man per conditional include folgenden style mit einbinden:

.Zebra_DatePicker_Icon {
    margin-top: 3px !important;
    margin-right: 5px !important;
}

Danke fürs Zuhören 😉


Kategorien: Coden | html / css | javascript



Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *