Ako získať a formátovať hodnotu z dijitu DateTextBox (Dojo)

V predchádzajúcom článku bol predstavený spôsob zadávania východiskovej hodnoty modulu DateTextBox. V tomto článku bude predstavený spôsob získavania hodnoty zvolenej používateľom a jej formátovanie do požadovaného tvaru.

Pre reakciu na výber dátumu je možné použiť udalosť onChange v kombinácii s modulom dojo/on. Modul dojo/on je zdedený, takže ho nie je potrebné definovať. V nasledujúcom príklade je deklaratívne vytvorený dijit DateTextBox, ktorému je priradený poslucháč udalostí na udalosť onChange. Tá zabezpečí, že po zmene dátumu sa v konzole vypíše zvolená hodnota.

Príklad: Zápis do elementu <body>.

1
2
<input id="dateTextBox" data-dojo-type="dijit/form/DateTextBox" 
value="2013-02-18">
<input id="dateTextBox" data-dojo-type="dijit/form/DateTextBox" 
value="2013-02-18">

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
7
8
9
10
11
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var result = this.get("value");
            console.log(result);
        }
    });
});
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var result = this.get("value");
            console.log(result);
        }
    });
});

Ako vidieť, základný výstupný formát nemusí byť vhodný pre ďalšie spracovanie. Preto je potrebné výstup často formátovať do iné tvaru.

Príklad: Príklad výstupu.

1
Fri Feb 15 2013 00:00:00 GMT+0100 (Central Europe Standard Time)
Fri Feb 15 2013 00:00:00 GMT+0100 (Central Europe Standard Time)

Pre tento účel je určený modul dojo/date/locale. Nasledujúci príklad formátuje dátum na patern DD.MM.YYYY, kde dni a mesiace nie sú dopĺňané nulou.

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var value = this.get("value");
            var result = locale.format(value, {
            selector: "date",
                    formatLength: "short"
            });
                    console.log(result);
        }
    });
});
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var value = this.get("value");
            var result = locale.format(value, {
            selector: "date",
                    formatLength: "short"
            });
                    console.log(result);
        }
    });
});

Ďalší príklad formátuj dátum rovnakého formátu ako predchádzajúci príklad s tým rozdielom, že dni a mesiace sú dopĺňané nulou.

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var value = this.get("value");
            var result = locale.format(value, {
            selector: "date",
            formatLength: "short",
            datePattern : "dd.MM.yyyy"
            });
                    console.log(result);
        }
    });
});
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var value = this.get("value");
            var result = locale.format(value, {
            selector: "date",
            formatLength: "short",
            datePattern : "dd.MM.yyyy"
            });
                    console.log(result);
        }
    });
});

Posledný príklad demonštruje výstup vo formáte ISO, teda vo formáte, ktorý je možné aplikovať aj na samotný dijit.

Príklad: Zápis do elementu <script>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var value = this.get("value");
            var result = locale.format(value, {
                selector: "date",
                formatLength: "short",
                datePattern: "yyyy-MM-dd"
            });
            console.log(result);
        }
    });
});
require(["dojo/ready", "dojo/date/locale", "dijit/registry", 
"dojo/parser"], function(ready, locale, registry) {
    ready(function() {
        var dateTextBox = registry.byId("dateTextBox");
        dateTextBox.on("change", getValue);
        function getValue() {
            var value = this.get("value");
            var result = locale.format(value, {
                selector: "date",
                formatLength: "short",
                datePattern: "yyyy-MM-dd"
            });
            console.log(result);
        }
    });
});

Záver

Ďalší príspevok venovaný dijitu DateTextBox bude na tému: Ako formátovať zobrazenú hodnotu v dijite DateTextBox.

Ako získať a formátovať hodnotu z dijitu DateTextBox (Dojo)

Záver

Komentáre

Pridať komentár