MaterialComponents: date_tag Komponente

diff --git a/SL/Presenter/MaterialComponents.pm b/SL/Presenter/MaterialComponents.pm
index db92562..9b69847 100644 (file)
--- a/SL/Presenter/MaterialComponents.pm
+++ b/SL/Presenter/MaterialComponents.pm
@@ -27,6 +27,7 @@ use constant MEDIUM          => 'medium';
 use constant SMALL           => 'small';
 use constant TINY            => 'tiny';
 use constant INPUT_FIELD     => 'input-field';
+use constant DATEPICKER      => 'datepicker';
 
 use constant WAVES_EFFECT    => 'waves-effect';
 use constant WAVES_LIGHT     => 'waves-light';
@@ -204,6 +205,41 @@ sub input_tag {
   );
 }
 
+sub date_tag {
+  my ($name, $value, %attributes) = @_;
+
+  _set_id_attribute(\%attributes, $name);
+
+  my $icon  = $attributes{icon}
+    ? icon(delete $attributes{icon}, class => 'prefix')
+    : '';
+
+  my $label = $attributes{label}
+    ? html_tag('label', delete $attributes{label}, for => $attributes{id})
+    : '';
+
+  $attributes{type} = 'text'; # required for materialize
+
+  my @onchange = $attributes{onchange} ? (onChange => delete $attributes{onchange}) : ();
+  my @classes  = (delete $attributes{class});
+
+  $::request->layout->add_javascripts('kivi.Validator.js');
+  $::request->presenter->need_reinit_widgets($attributes{id});
+
+  $attributes{'data-validate'} = join(' ', "date", grep { $_ } (delete $attributes{'data-validate'}));
+
+  html_tag('div',
+    $icon .
+    html_tag('input',
+      blessed($value) ? $value->to_lxoffice : $value,
+      size   => 11, type => 'text', name => $name,
+      %attributes,
+      class => DATEPICKER, @onchange,
+    ) .
+    $label,
+    class => [ grep $_, @classes, INPUT_FIELD ],
+  );
+
 
 }
 

diff --git a/templates/mobile_webpages/test/components.html b/templates/mobile_webpages/test/components.html
index 842c07b..f539799 100644 (file)
--- a/templates/mobile_webpages/test/components.html
+++ b/templates/mobile_webpages/test/components.html
@@ -39,3 +39,10 @@
 [% P.M.input_tag("i1", "", placeholder="2 cols placeholder", icon="phone", class="col s6") %]
 [% P.M.input_tag("i2", "", label="2 cols label", icon="account_circle", class="col s6") %]
 </div>
+
+<h2>Date Picker</h2>
+
+<div class="row">
+[% P.M.date_tag("d1", "", label="date of birth", class="col s6", icon="date_range") %]
+[% P.M.date_tag("d1", "", class="col s6", placeholder="date of birth?", icon="access_time") %]
+</div>