Datepicker

Als Datepicker habe ich mir das Framework jQuery ausgesucht (http://jqueryui.com/demos/datepicker).

Einbinden JQuery

 <link type="text/css" href="/typo3conf/ext/rsyscertificate/javascripts/jquery-ui-1.7.1.custom/css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />    
    <script type="text/javascript" src="/typo3conf/ext/rsyscertificate/javascripts/jquery-ui-1.7.1.custom/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="/typo3conf/ext/rsyscertificate/javascripts/jquery-ui-1.7.1.custom/js/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript" src="/typo3conf/ext/rsyscertificate/javascripts/jquery-ui-1.7.1.custom/js/jquery-ui-i18n.min.js"></script>

Formularfeld

Für das input Feld <input name="tx_rsyscertificate[date_from]" id="certificateForm-date_from" class="hasDatepicker"/> folgendes Javascript:

<script type="text/javascript">
    <!--
    $(function() {
        $.datepicker.setDefaults(
            $.extend({
                showMonthAfterYear: false,
                showButtonPanel: false
                },
                $.datepicker.regional['de']
            )
        );
        $("#certificateForm-date_from").datepicker({
            showOn: 'button',
            buttonImage: 'media/calendar-blue.gif',
            buttonImageOnly: true
        });
    });
    //-->
</script>

Stylesheet

Zum Stylen folgendes css:

#ui-datepicker-div {
    font-size: 10px;   
}

input.hasDatepicker {
    margin: 0px 0px 0px 0px ;
    padding: 0px 0px 0px 0px;   
}

img.ui-datepicker-trigger {
    margin: 0px 0px 0px 0px ;
    padding: 0px 0px 0px 0px;   
}