jQuery EasyUI Form Plugin -Datebox Boîte de date

jQuery EasyUI 插件jQuery EasyUI Plugin

Hérite de $.fn.combo.defaults. Surchargez les valeurs par défaut via $.fn.datebox.defaults.

La datebox combine une zone de texte modifiable avec un panneau de calendrier déroulant, à partir duquel l'utilisateur peut sélectionner une date. La chaîne saisie dans la zone de texte peut être convertie en une date valide. La date sélectionnée peut également être convertie dans le format souhaité.

Dépendances

  • combo
  • calendrier

Utilisation

Créer une datebox à partir du balisage.

<input id="dd" type="text" class="easyui-datebox" required="required">

Créer une datebox en JavaScript.

<input id="dd" type="text">

$('#dd').datebox({
    required:true
});

Propriétés

Ces propriétés héritent de combo. Voici les propriétés ajoutées pour datebox.

Name Type Description Valeur par défaut
panelWidth nombre La largeur du panneau de calendrier déroulant. 180
panelHeight nombre La hauteur du panneau de calendrier déroulant. auto
currentText string Le texte affiché sur le bouton du jour actuel. Aujourd'hui
closeText string Le texte affiché sur le bouton de fermeture. Close
okText string Le texte affiché sur le bouton OK. OK
disabled booléen Désactive le champ lorsqu'il est défini sur true. false
buttons array Les boutons sous le calendrier. Cette propriété est disponible depuis la version 1.3.5.
Exemple de code :
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
    text: 'MyBtn',
    handler: function(target){
        alert('click MyBtn');
    }
});
$('#dd').datebox({
    buttons: buttons
});
sharedCalendar string,selector Un calendrier partagé utilisé par plusieurs composants datebox. Cette propriété est disponible depuis la version 1.3.5.
Exemple de code :
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
null
formatter fonction Une fonction pour formater les dates. Cette fonction a un paramètre 'date' et renvoie une valeur de chaîne. L'exemple suivant montre comment remplacer la fonction formatter par défaut.
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}
parser fonction Une fonction pour analyser les chaînes de date. Cette fonction prend une chaîne 'date' et renvoie une valeur de date. L'exemple suivant montre comment remplacer la fonction parser par défaut.
$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

Événements

Name Parameters Description
onSelect date Déclenché lorsque l'utilisateur sélectionne une date.
Exemple de code :
$('#dd').datebox({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

Méthodes

Ces méthodes étendent de combo. Ci-dessous se trouvent les méthodes remplacées pour datebox.

Name Parameters Description
options none Renvoie l'objet options.
calendrier none Obtenir l'objet calendrier. L'exemple suivant montre comment obtenir l'objet calendrier et le rendre à nouveau.
// get the calendar object
var c = $('#dd').datebox('calendar');
// set the first day of week to monday
c.calendar({
    firstDay: 1
});
setValue value Définir la valeur du datebox.
Exemple de code :
$('#dd').datebox('setValue', '6/1/2012');    // set datebox value
var v = $('#dd').datebox('getValue');    // get datebox value
jQuery EasyUI 插件jQuery EasyUI Plugin Autres extensions