jQuery EasyUI Formular-Plugin -Datebox Datumsfeld

jQuery EasyUI 插件jQuery EasyUI Plugin

Erbt von $.fn.combo.defaults. Überschreiben Sie die Standardwerte über $.fn.datebox.defaults.

Die Datebox kombiniert ein editierbares Textfeld mit einem Dropdown-Kalender-Panel, aus dem der Benutzer ein Datum auswählen kann. Die in das Textfeld eingegebene Zeichenkette kann in ein gültiges Datum umgewandelt werden. Das ausgewählte Datum kann auch in das gewünschte Format umgewandelt werden.

Abhängigkeiten

  • combo
  • calendar

Nutzung

Erstellen Sie eine Datebox aus Markup.

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

Erstellen Sie eine Datebox mit JavaScript.

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

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

Eigenschaften

Diese Eigenschaften erben von combo. Nachfolgend sind die für datebox hinzugefügten Eigenschaften aufgeführt.

Name Type Beschreibung Standardwert
panelWidth number Die Breite des Drop-down-Kalenderpanels. 180
panelHeight number Die Höhe des Drop-down-Kalenderpanels. auto
currentText string Der Text, der auf der Schaltfläche für den aktuellen Tag angezeigt wird. Heute
closeText string Der Text, der auf der Schließen-Schaltfläche angezeigt wird. Close
okText string Der Text, der auf der OK-Schaltfläche angezeigt wird. OK
disabled boolesch Deaktiviert das Feld, wenn auf true gesetzt. false
buttons array Die Schaltflächen unter dem Kalender. Diese Eigenschaft ist seit Version 1.3.5 verfügbar.
Codebeispiel:
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 Ein gemeinsam genutztes Kalenderobjekt, das von mehreren datebox-Komponenten verwendet wird. Diese Eigenschaft ist seit Version 1.3.5 verfügbar.
Codebeispiel:
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
null
formatter Funktion Eine Funktion zum Formatieren von Datumsangaben. Diese Funktion hat einen Parameter 'date' und gibt einen Zeichenfolgenwert zurück. Das folgende Beispiel zeigt, wie die Standard-Formatter-Funktion überschrieben wird.
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}
parser Funktion Eine Funktion zum Parsen von Datumszeichenfolgen. Diese Funktion nimmt eine Zeichenfolge 'date' entgegen und gibt einen Datumswert zurück. Das folgende Beispiel zeigt, wie die Standard-Parser-Funktion überschrieben wird.
$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

Ereignisse

Name Parameters Beschreibung
onSelect date Wird ausgelöst, wenn der Benutzer ein Datum auswählt.
Codebeispiel:
$('#dd').datebox({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

Methoden

Diese Methoden erben von combo. Nachfolgend sind die für datebox überschriebenen Methoden aufgeführt.

Name Parameters Beschreibung
options none Gibt das Optionsobjekt zurück.
calendar none Ruft das Kalenderobjekt ab. Das folgende Beispiel zeigt, wie das Kalenderobjekt abgerufen und dann erneut gerendert wird.
// get the calendar object
var c = $('#dd').datebox('calendar');
// set the first day of week to monday
c.calendar({
    firstDay: 1
});
setValue value Legt den Wert der datebox fest.
Codebeispiel:
$('#dd').datebox('setValue', '6/1/2012');    // set datebox value
var v = $('#dd').datebox('getValue');    // get datebox value
jQuery EasyUI 插件jQuery EasyUI Plugin Weitere Erweiterungen