Question: datetime-picker in own plugins

TrueHatori commented 8 years ago

How can I use the bootstrap-datetimepicker in my own plugins? I have some date-fields and it would be nice, if I not must use an external calendar for looking the right date.

CaMer0n commented 8 years ago

Take a look at form_handler.php.

e107::getForm()->datepicker('field_name',$curVal);

TrueHatori commented 8 years ago

I do not use the form handler. The documentation for this is much too thin. Ok, then it must go without the datetime picker. Too bad, maybe if someone has written a useful documentation for the system.

CaMer0n commented 8 years ago

@TrueHatori You are correct. We need more people to help.

Jimmi08 commented 8 years ago

@TrueHatori I maybe don't understand, but if you want to use any datepicker, you can:

code your own one
use built form handler, you can use it just for this field, not for all form, it's just text
look at this field how is done in fom_handler.php and write your own according this.

What this has related to documentation? I suppose that using form handler is standard, that should be done in documentation, and other way shouldn't and should be written just as tips.

I am just curious, not offence.

TrueHatori commented 8 years ago

Jimmi08 - If I want code self, I wouldn't use a CMS. I have fields examined with datepicker, with Firebug and the source code. So I spent several days, I get it anyway not go. And if I had done it, I would not have probably asked. The Developer Manual is almost unusable, with the few lines of code thrown one can hardly do something. The only usable section for the database, only with difficulty, the rest is useless. The examples can be read out next to nothing. The documentation label is set from CaMer0n, not from me.

Moc commented 8 years ago

To be honest, the quickest and easiest way to do this by using the form handler functionality.

All you need is this:

e107::getForm()->datepicker("name of your field", $value);

This will give you a basic form field which uses datepicker. You can further enhance it by setting some options. More documentation in the form handler here:

    /**
     *  Date field with popup calendar // NEW in 0.8/2.0
     *
     * @param string $name the name of the field
     * @param integer $datestamp UNIX timestamp - default value of the field
     * @param array or str 
     * @example $frm->datepicker('my_field',time(),'type=date');
     * @example $frm->datepicker('my_field',time(),'type=datetime&inline=1');
     * @example $frm->datepicker('my_field',time(),'type=date&format=yyyy-mm-dd');
     * @example $frm->datepicker('my_field',time(),'type=datetime&format=MM, dd, yyyy hh:ii');
     * 
     * @url http://trentrichardson.com/examples/timepicker/
     */

I'll incorporate this into the documentation soon. We all agree that it currently is too limited. It's just a matter of resources (time mainly). We need to balance bugfixing, making improvements, communicating, documenting and so on, and documentation hasn't received the greatest amount of attention unfortunately. Work in progress though :)

Also, note you said:

How can I use the bootstrap-datetimepicker in my own plugins?

'Own plugins' means that you will have to do some coding. This can be very basic coding, or very advanced, that all depends on the complexity of the plugin.

TrueHatori commented 8 years ago

Ok, I need this form. Write it in form_handler so it works and I promise, I use it in the future.

$text .= "
            <fieldset>
            <p>".LAN_PLUGIN_SP_LANG02."</p>
            <form name='sendeplanSkelett' method='POST' action='".e_SELF."'>
            <table style='width: 65%;'>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_DATUM.": <br /><span style='font-size: 10px;'>".LAN_PLUGIN_SP_DATE_FORMAT."</span></td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                    <input class='e-datetime input-xlarge form-control' type='text' size='12' name='datum' id='datum' data-date-format='yyyy-mm-dd' data-date-ampm='false' data-date-firstday='0' />
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_TIME_BEGIN.": </td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                        <select name='beginn'>
                            <option value='00:00'>00:00</option>
                            <option value='01:00'>01:00</option>
                            <option value='02:00'>02:00</option>
                            <option value='03:00'>03:00</option>
                            <option value='04:00'>04:00</option>
                            <option value='05:00'>05:00</option>
                            <option value='06:00'>06:00</option>
                            <option value='07:00'>07:00</option>
                            <option value='08:00'>08:00</option>
                            <option value='09:00'>09:00</option>
                            <option value='10:00'>10:00</option>
                            <option value='11:00'>11:00</option>
                            <option value='12:00'>12:00</option>
                            <option value='13:00'>13:00</option>
                            <option value='14:00'>14:00</option>
                            <option value='15:00'>15:00</option>
                            <option value='16:00'>16:00</option>
                            <option value='17:00'>17:00</option>
                            <option value='18:00'>18:00</option>
                            <option value='19:00'>19:00</option>
                            <option value='20:00'>20:00</option>
                            <option value='21:00'>21:00</option>
                            <option value='22:00'>22:00</option>
                            <option value='23:00'>23:00</option>
                        </select>
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_TIME_END.": </td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                        <select name='ende'>
                            <option value='01:00'>01:00</option>
                            <option value='02:00'>02:00</option>
                            <option value='03:00'>03:00</option>
                            <option value='04:00'>04:00</option>
                            <option value='05:00'>05:00</option>
                            <option value='06:00'>06:00</option>
                            <option value='07:00'>07:00</option>
                            <option value='08:00'>08:00</option>
                            <option value='09:00'>09:00</option>
                            <option value='10:00'>10:00</option>
                            <option value='11:00'>11:00</option>
                            <option value='12:00'>12:00</option>
                            <option value='13:00'>13:00</option>
                            <option value='14:00'>14:00</option>
                            <option value='15:00'>15:00</option>
                            <option value='16:00'>16:00</option>
                            <option value='17:00'>17:00</option>
                            <option value='18:00'>18:00</option>
                            <option value='19:00'>19:00</option>
                            <option value='20:00'>20:00</option>
                            <option value='21:00'>21:00</option>
                            <option value='22:00'>22:00</option>
                            <option value='23:00'>23:00</option>
                            <option value='23:59'>23:59</option>
                        </select>
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_SENDUNG.": </td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                    <select name='sendung'>
                        <option value='00'>".LAN_PLUGIN_WAHL."</option>
                ";
                    // die Sendungen holen, moderierte Namen verwenden, erkennt sich besser
                    $sendungen = $sql -> select("hra_sp_sendungen", "hra_sp_sendungen_id, hra_sp_sendungen_name_moderiert", "hra_sp_sendungen_id > 0 ORDER BY hra_sp_sendungen_name_moderiert ASC");
                    while($row = $sql -> fetch($sendungen))
                    {
                        $sendungID = $row['hra_sp_sendungen_id'];
                        $sendung = $row['hra_sp_sendungen_name_moderiert'];
    $text .= "          <option value='".$sendungID."'>".$sendung."</option>";
                    }
    $text .= "
                    </select>
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_MODERATOR.": </td>
                ";
                // den AutoDJ holen, zuerst die ID
                $auto = $sql -> select("hra_conf", "hra_conf_autodj", "hra_conf_id = 1");
                $autoDjIDArray = $sql -> fetch($auto);
                $autoDjId = $autoDjIDArray['hra_conf_autodj'];
                // jetzt den Namen
                $userData = e107::user($autoDjId);
                $autoDJ = $userData['user_name'];
    $text .= "
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'><input type='text' name='autodj' value='".$autoDjId."' size='20' maxlength='20' readonly /> ".$autoDJ."</td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td>&nbsp;</td><td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'><input name='writeShow' class='btn update btn-success' type='submit' value='".LAN_PLUGIN_INSERT."' /></td>
                </tr>
                </table>
            </form>
            </fieldset>
            ";

Jimmi08 commented 8 years ago

Real example of using in old plugin: $TOPIC_FIELD = $frm->datepicker("startdate",$row['content_startdate'],"type=datetime&size=xx-large"); I put it here because Moc example has time() as default value (always actual time), and with editing older post you need time that was saved in database.

And to complet information - if you use new Admin UI for your plugin, you will not need to use this.

Moc commented 8 years ago

@TrueHatori

Did this quickly so there may be errors:

<?php
require_once("class2.php");
require_once(HEADERF);

$tp = e107::getParser(); 
$frm = e107::getForm(); 

$timeslots = array("00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00");
$text .= "
            <fieldset>
            <p>".LAN_PLUGIN_SP_LANG02."</p>

            <form name='sendeplanSkelett' method='post'>

            <table style='width: 65%;'>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_DATUM.": <br /><span style='font-size: 10px;'>".LAN_PLUGIN_SP_DATE_FORMAT."</span></td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                        ".$frm->datepicker('datum', $day)."
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_TIME_BEGIN.": </td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                        ".$frm->select('beginn', $timeslots)."
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_TIME_END.": </td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                        ".$frm->select('ende', $timeslots)."
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_SENDUNG.": </td>
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'>
                    <select name='sendung'>
                        <option value='00'>".LAN_PLUGIN_WAHL."</option>
                ";
                    // die Sendungen holen, moderierte Namen verwenden, erkennt sich besser
                    $sendungen = $sql->retrieve("hra_sp_sendungen", "hra_sp_sendungen_id, hra_sp_sendungen_name_moderiert", "hra_sp_sendungen_id > 0 ORDER BY hra_sp_sendungen_name_moderiert ASC");
                    while($sendungen)
                    {
                        $sendungID  = $sendungen['hra_sp_sendungen_id'];
                        $sendung    = $sendungen['hra_sp_sendungen_name_moderiert'];
                        $text       .= "<option value='".$sendungID."'>".$sendung."</option>";
                    }
    $text .= "
                    </select>
                    </td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td style='text-align: right; vertical-align: top; width: 25%; padding-bottom: 5px; padding-top: 5px; padding-right: 5px;'>".LAN_PLUGIN_SP_MODERATOR.": </td>
                ";
                // den AutoDJ holen, zuerst die ID 
                $autoDJId = $sql->retrieve("hra_conf", "hra_conf_autodj", "hra_conf_id = 1");
                $autoDjId = $autoDjId['hra_conf_autodj'];
                // jetzt den Namen
                $userData = e107::user($autoDjId);
                $autoDJ = $userData['user_name'];
    $text .= "
                    <td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'><input type='text' name='autodj' value='".$autoDjId."' size='20' maxlength='20' readonly /> ".$autoDJ."</td>
                </tr>
                <tr style='border-bottom: thin solid Black;'>
                    <td>&nbsp;</td><td style='vertical-align: top; padding-bottom: 5px; padding-top: 5px; padding-left: 5px;'><input name='writeShow' class='btn update btn-success' type='submit' value='".LAN_PLUGIN_INSERT."' /></td>
                </tr>
                </table>
            </form>
            </fieldset>
            ";

e107::getRender()->tablerender("Test page for TrueHatori", $text);
require_once(FOOTERF);

Some notes:

I also updated the sql methods you use (I prefer retrieve over fetch).
Styling of the form should be done through CSS and not inline styling (google this :) )
I don't have all the files so I couldn't test actual functionality but it should work
You can customize the date(time) format of the datepicker using the third parameter. For example

$frm->datepicker('datum', $day, 'type=datetime&size=xx-large');

TrueHatori commented 8 years ago

And to complet information - if you use new Admin UI for your plugin, you will not need to use this.<

Jimi, I don't use Admin UI, I not understand this, no documentation. I use it so, how it is written in gsitemap plugin in admin_config.php.

@Moc: From where ist $day ? I use this form in admin area in my plugin folder in admin_config.php Regardless, it does not work, resulting in a blank page. I will continue to work without datepicker and without form-handler. I wish you a peaceful and happy Easter.

TrueHatori commented 8 years ago

Last Post for today ;) This is code of a function:

// Formular um einen Tag zu kopieren
    function dayCopyForm()
    {
        $sql = e107::getDb();
        $ns = e107::getRender();
        $mes = e107::getMessage();
        $frm = e107::getForm();
        // Datum aus GET
        $dateAlt = $_GET['datumCopy'];
        // Form fuer neues Datum
    $text .= '
            <p>'.LAN_PLUGIN_SP_SKELETT_17.'</p>
            <p>'.LAN_PLUGIN_SP_SKELETT_18.$dateAlt.'</p>
        ';
            $frm -> open('dayCopyFormular', 'post', e_SELF, array('autocomplete' => 'on', 'class' => 'formclass'));
            $frm -> datepicker('datum', $day, 'type=date&format=yyyy-mm-dd&size=x-large');
    $text .= '
            <input name="writeDayCopy" class="btn update btn-success" type="submit" value="'.LAN_PLUGIN_SP_SKELETT_19.'" />
        ';
            $frm -> close();

        $ns -> tablerender(LAN_PLUGIN_SP_SKELETT_16, $mes->render(). $text);
    }

And here, what the result in source in html:

`<div class="block">
        <h4 class="caption">Einen ganzen Tag kopieren</h4>
        <div class="block-text">
            <p>Gib das Datum des Tages an, wohin die Sendungen kopiert werden sollen</p>
            <p>altes Datum: 2016-04-17</p>

            <input name="writeDayCopy" class="btn update btn-success" type="submit" value="Jetzt kopieren" />

            </div>
</div>

No form, no input field. Happy Easter.

Moc commented 8 years ago

@TrueHatori Well, I don't have all the code so there's now way I can test this but I suspect you are missing this:

$frm = e107::getForm();

Blank pages are good since they can be debugged to show the error, which should tell you what is wrong.

Also, the gsitemap plugn requires a full rewrite and should not be used as an example at the moment. I do agree on the limited documentation, that's a work in progress.

TrueHatori commented 8 years ago

$frm = e107::getForm();

Is the seventh line in code I posted. The Code of gsitemap I understand, I can read it and use it for my plugin. I can not with the Admin UI. Object-oriented programming in PHP is new for me, so far I have everything written line-oriented.

Moc commented 8 years ago

@TrueHatori I was referring to the first extract of code. I am not even looking at the second one yet.

Moc commented 6 years ago

I am assuming this issue has been resolved. If you require further assistance, please let us know

e107inc / e107

Question: datetime-picker in own plugins #1455