Updated documentation

README.md

@@ -58,6 +58,7 @@ The Library runs on any kind of **ESP8266** and **ESP32** (NodeMCU, AI Thinker,
 - Transport layer rework by @iangray001
 - Time control by @iangray001
 - Vertical controls by @iangray001
+- Time/date/password/color input types by @pcbbc
 
 ## Roadmap
 
@@ -289,6 +290,34 @@ Events:
  - `T_VALUE` - Fired when a text value changes.
 
 
+#### Date, Time, Colour and Password Input
+
+![text](docs/ui_inputtypes.png)
+
+As an extension to the text input control, you can also specify the type attribute to be used for the HTML input element.
+This allows you to easily create input controls for Date, Time, Colour and Passwords, or indeed any other
+[HTML Input Types](https://www.w3schools.com/html/html_form_input_types.asp) supported by your browser. 
+
+```
+text_date = ESPUI.text("Date", callback, ControlColor::Dark, "2022-05-24");
+ESPUI.setInputType(text_date, "date");
+
+text_time = ESPUI.text("Time", callback, ControlColor::Dark, "13:00");
+ESPUI.setInputType(text_time, "time");
+
+text_colour = ESPUI.text("Colour", callback, ControlColor::Dark, "#FF0000");
+ESPUI.setInputType(text_colour, "color");
+
+text_password = ESPUI.text("Password", callback, ControlColor::Dark, "tiddles123");
+ESPUI.setInputType(text_password, "password");
+```
+
+Note that not all browsers support all input types, and that the control displayed to edit the input is browser dependent.
+
+However even with a type set, user input should still be validated 
+because it is easy to bypass client-side checks. Never trust user input.
+
+
 #### Select control
 
 ![option1](docs/ui_select1.png)

data/js/controls.js

@@ -532,6 +532,9 @@ function start() {
         if(data.hasOwnProperty('elementStyle')) {
           $("#text" + data.id).attr("style", data.elementStyle);
         }
+        if(data.hasOwnProperty('inputType')) {
+          $("#text" + data.id).attr("type", data.inputType);
+        }
         break;
 
       case UPDATE_SELECT:

data/js/controls.min.js

@@ -36,6 +36,7 @@ break;case UPDATE_SLIDER:$("#sl"+data.id).attr("value",data.value)
 slider_move($("#id"+data.id),data.value,"100",false);if(data.hasOwnProperty('elementStyle')){$("#sl"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_NUMBER:$("#num"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#num"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_TEXT_INPUT:$("#text"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#text"+data.id).attr("style",data.elementStyle);}
+if(data.hasOwnProperty('inputType')){$("#text"+data.id).attr("type",data.inputType);}
 break;case UPDATE_SELECT:$("#select"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#select"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_BUTTON:$("#btn"+data.id).val(data.value);$("#btn"+data.id).text(data.value);if(data.hasOwnProperty('elementStyle')){$("#btn"+data.id).attr("style",data.elementStyle);}
 break;case UPDATE_PAD:case UPDATE_CPAD:break;case UPDATE_GAUGE:$("#gauge"+data.id).val(data.value);if(data.hasOwnProperty('elementStyle')){$("#gauge"+data.id).attr("style",data.elementStyle);}