Admin

range date symfony jquery
0
Published il y a 9 mois,2 jours

Mettre en place rapidement un système d'écart de dates permettant de choisir une période entre 2 dates) 

Tout d'abord, nous assumons que votre entité possède 2 champs de date, 1 pour le début, que nous appellerons after et un pour la fin que nous appelerons before.

Notre formulaire va charger la librairie javascript jquery-ui et un script chargé de faire le rendu des widgets, ce n'est donc pas le formulaire entier qui va gérer ça.

Nous allons dans un premier temps spécifier un widget input type text à nos 2 champs de date before et after comme ceçi :

 'before' => new sfWidgetFormInputText() et 'after' => new sfWidgetFormInputText()

Ensuite il faut inclure jquery-ui.js, je ne vous ferait pas l'affront de vous expliquer comment faire ;)

Ensuite, il va falloir créer un fichier javascript contenant le script chargé de faire le rendu des widgets de date.

Créons le içi : /web/js/range_date.js

 

 
function initRangeDates(end_date_id,start_date_id,altField){
 
    var dates = $("#"+start_date_id+", #"+end_date_id).datepicker({
        altField: altField,
        altFormat: "yy/mm/dd",
        defaultDate: "+1w",
        dateFormat: "yy/mm/dd",
        changeMonth: false,
        changeYear: false,
        numberOfMonths: 1,
        showOn: "button",
        buttonImage: "/images/layout/calendar.png",
        buttonImageOnly: true,
        showAnim: "drop",
        onSelect: function( selectedDate ) {
            var option = this.id == start_date_id ? "minDate" : "maxDate",
            instance = $( this ).data( "datepicker" );
            date = $.datepicker.parseDate(
                instance.settings.dateFormat ||
                $.datepicker._defaults.dateFormat,
                selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        },
        onClose: function() {
            $("#"+this.id+"_textual").html($("#"+this.id).val());
        }
    });
 
    $.datepicker.regional['fr'] = {
        closeText: 'Fermer',
        prevText: '<Préc',
        nextText: 'Suiv>',
        currentText: 'Courant',
        monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
        'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
        monthNamesShort: ['Jan','Fév','Mar','Avr','Mai','Jun',
        'Jul','Aoû','Sep','Oct','Nov','Déc'],
        dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
        dayNamesShort: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
        dayNamesMin: ['Di','Lu','Ma','Me','Je','Ve','Sa'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''
    };
    $.datepicker.setDefaults($.datepicker.regional['fr']);
 
};
 
 
Incluons le en ajoutant le code use_javascript('range_date') à la page d'affichage du formulaire.
Dans cette même page, nous n'avons plus qu'une chose à faire, appeler la fonction javascript initRangeDates en passant les ids des deux champs de date !
 

Et l paf, ca fait des chocapics !


Add a comment :

 

Votre email ne sera jamais publié

Doit débuter par http:// ou https://