Archives de Tag: jQuery

Datepicker – Mois et année uniquement

La suite de ce billet sur les Calendrier en jQueryvia DatePicker.

Voici comment avoir avec jQuery-ui un calendrier qui n’affiche que les mois et les années.

$(".date").datepicker({
    dateFormat: 'mm/yy',
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    showOn: "button",
    buttonImage: "/Content/images/calendar.png",
    buttonImageOnly: true,
    onClose: function (dateText, inst) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).datepicker('setDate', new Date(year, month, 1));
    },
    beforeShow: function (input, inst) {
        if ((datestr = $(this).val()).length > 0) {
            actDate = datestr.split('/');
            year = actDate[1];
            month = actDate[0] - 1;
            $(this).datepicker('option', 'defaultDate', new Date(year, month));
            $(this).datepicker('setDate', new Date(year, month));
        }
    }
});
$(".date").focus(function () {
    $(".ui-datepicker-calendar").hide();
    $("#ui-datepicker-div").position({
        my: "center top",
        at: "center bottom",
        of: $(this)
    });
});

Et voici le résultat :

Vérifier l’existence d’un objet en jQuery

Pour vérifier l’existence d’un objet en jQuery, il suffit de demandé la propriété length de cet objet. Si la condition passe, alors l’objet existe et on pourra travailler dessus.

 
$(document).ready(function () {
//Vérifier que le tbody existe dans la table myTable
    if ($("#myTable").children("tbody").length) {
        // ...
    }
}); 

Source

Calendrier en jQuery – DatePicker

Tous d’abord récupérer (si ce n’est pas déjà fait) le jquery-ui et le css qui vous fait envie sur le site officiel.

Vous n’avez plus qu’à les importer.

<script src="../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<link href="../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />

Pendant qu’on y est, on récupère également la traduction française du calendrier ici. Et on l’importe

<script src="../Scripts/jquery.ui.datepicker-fr.js" type="text/javascript"></script>

Ensuite on aura besoin d’une textbox pour saisir la date et l’afficher.

<input type="text" class="date"/>

Et enfin de script pour relier la textbox avec le calendrier.

<script>
$(function () {
    $('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>

Voilà c’est aussi simple, et comme bonus, voici la même chose en intégrale et en plus classe. Lire la suite

jQuery Visual Studio Doc

Visual Studio est vraiment un logiciel terrible !! Son énorme point fort est l’IntelliSense (l’autocomplétion de VS).

Cet outils a des limites, les limites du languages que l’on code (C#, J#, ASP.net, html). Et lorsque vint le jQuery et l’absence de documentation, voir d’IDE assez performant pour coder, on fut obliger de passer par notepad++.
Mais voila que Microsoft à sortit les doc de jQuery.

Disponible ici. Il suffit d’ajouter le jquery-1.X.X-vsdoc.js dans le même répertoire que le JQuery scripts et l’on utilise et l’IntelliSense vous donnera la documentation de toutes les fonctions jQuery!!

Et ce n’est pas tout. En cas d’utilisation d’un script JS externe, on lui rajoute simplement une référence (un simple glissé déposé du vsdoc dans le fichier vous écrira :

/// <reference path="../jquery-1.7.2-vsdoc.js" />

Pour un rendu identique.