10 examples of 'react js date format dd/mm/yyyy' in JavaScript

Every line of 'react js date format dd/mm/yyyy' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
11format (fmt = 'yyyy-MM-dd HH:mm:ss') {
12 const obj = {
13 'y+': this.date.getFullYear(),
14 'M{2}': this._paddingZero(this.date.getMonth() + 1),
15 'd{2}': this._paddingZero(this.date.getDate()),
16 'H{2}': this._paddingZero(this.date.getHours()),
17 'h{2}': this._paddingZero(this.date.getHours() % 12),
18 'm{2}': this._paddingZero(this.date.getMinutes()),
19 's{2}': this._paddingZero(this.date.getSeconds()),
20 'M': this.date.getMonth() + 1,
21 'd': this.date.getDate(),
22 'H': this.date.getHours(),
23 'h': this.date.getHours() % 12,
24 'm': this.date.getMinutes(),
25 's': this.date.getSeconds(),
26 'W': this.date.getDay()
27 }
28 for (let [key, ] of Object.entries(obj)) {
29 const regexp = new RegExp(`(${key})([^a-zA-Z])?`)
30 if (regexp.test(fmt)) {
31 fmt = fmt.replace(RegExp.$1, obj[key])
32 }
33 }
34 return fmt
35}
Important

Use secure code every time

Secure your code as it's written. Use Snyk Code to scan source code in minutes – no build needed – and fix issues immediately. Enable Snyk Code

45function dateformat () {
46 return 'yyyy-MM-dd';
47}
139function getDate(dateObj) {
140 var date;
141 if (typeof dateObj.diff === 'function') {
142 date = dateObj.toDate();
143 } else {
144 date = new Date(dateObj.year, dateObj.month - 1, dateObj.day);
145 }
146 return new Moment(date).unix() * 1000;
147}
68dateFormat(date: any): string {
69 if (date === null) {
70 return null;
71 }
72 let d = new Date(date);
73 let y = d.getFullYear().toString();
74 let m = (d.getMonth() + 1).toString();
75 let day = d.getDate().toString();
76 return y + '-' + m + '-' + day;
77 //let dateStr:string = this.datePipe.transform(d,'yyyy-MM-dd');
78 //return dateStr;
79}
129function dateFormat(d) {
130 let month = d.getMonth() + 1;
131 let date = d.getDate();
132 if (month < 10) month = `0${month}`;
133 if (date < 10) date = `0${date}`;
134 return `${d.getFullYear()}-${month}-${date}`;
135}
486formatDate(d) {
487 const calendar = this;
488 const date = new Date(d);
489 const year = date.getFullYear();
490 const month = date.getMonth();
491 const month1 = month + 1;
492 const day = date.getDate();
493 const weekDay = date.getDay();
494 const { monthNames, monthNamesShort, dayNames, dayNamesShort } = calendar;
495 const { dateFormat, locale } = calendar.params;
496 if (typeof dateFormat === 'string') {
497 return dateFormat
498 .replace(/yyyy/g, year)
499 .replace(/yy/g, String(year).substring(2))
500 .replace(/mm/g, month1 < 10 ? `0${month1}` : month1)
501 .replace(/m(\W+)/g, `${month1}$1`)
502 .replace(/MM/g, monthNames[month])
503 .replace(/M(\W+)/g, `${monthNamesShort[month]}$1`)
504 .replace(/dd/g, day < 10 ? `0${day}` : day)
505 .replace(/d(\W+)/g, `${day}$1`)
506 .replace(/DD/g, dayNames[weekDay])
507 .replace(/D(\W+)/g, `${dayNamesShort[weekDay]}$1`);
508 }
509 if (typeof dateFormat === 'function') {
510 return dateFormat(date);
511 }
512 // Intl Object
513 const formatter = new Intl.DateTimeFormat(locale, dateFormat);
514 return formatter.format(date);
515}
182getDateInstance( v ) {
183 return this.props.moment( v ).toDate();
184}
249formatDate(date = new Date(), format = 'datetime') {
250 return dayjs(date).format(dateFormatPreset[format] || format);
251}
3export default function formatDate (date) {
4 return format(date, 'MM-dd');
5}
118function formatDateForPicker(date) {
119 var h = date.getHours();
120 var m = date.getMinutes();
121
122 function dd(n) { return (n < 10) ? '0' + n : n; }
123 return date.getFullYear() + "-" + dd(date.getMonth() + 1) + "-" + dd(date.getDate()) + "T" + dd(h) + ":" + dd(m);
124}</script><script>var logurl="log";Number.prototype.format=function(e,t,r,i){var o="\\d(?=(\\d{"+(t||3)+"})+"+(e>0?"\\D":"$")+")",n=this.toFixed(Math.max(0,~~e));return(i?n.replace(".",i):n).replace(new RegExp(o,"g"),"$&"+(r||","))},String.prototype.escapeJSON=function(){return this.replace(/[\\]/g,"\\\\").replace(/[\"]/g,'\\"').replace(/[\/]/g,"\\/").replace(/[\b]/g,"\\b").replace(/[\f]/g,"\\f").replace(/[\n]/g,"\\n").replace(/[\r]/g,"\\r").replace(/[\t]/g,"\\t")};var logs={url:"loglist.php",rmurl:"loglist.php?rm=",starturl:"loglist.php?start=",stopurl:"loglist.php?stop=1",dlurl:"loglist.php?dl=",ll:[],fs:{},logging:!1,vname:function(e){return""!=e&&!e.match(/[\W]/g)},dupname:function(e){var t=!1;return this.ll.forEach(function(r){e==r.name&&(t=!0)}),t},fsinfo:function(e,t){Q("#fssize").innerHTML=e.format(0,3,","),Q("#fsused").innerHTML=t.format(0,3,","),Q("#fsfree").innerHTML=(e-t).format(0,3,",")},stoplog:function(){if(this.logging&&confirm("停止記錄?")){var e=Q("#logname").value.trim();s_ajax({url:this.stopurl+e,m:"GET",success:function(e){location.reload()},fail:function(e){alert("停止記錄失敗:"+e)}})}},startlog:function(){var e=this;if(!e.logging){if(e.ll.length>=10)return void alert("記錄檔己經太多,請先刪除舊檔。");if(e.fs.size-e.fs.used<=2*e.fs.block)return void alert("儲存空間不足!");var t=Q("#logname").value.trim();if(!1===e.vname(t))return void alert("檔名不能使用,請勿使用特殊字完。");if(e.dupname(t))return void alert("記錄檔名重複。");var r="";if(Q("#calispindel").checked){var i=parseFloat(Q("#tiltinw").value.trim()),o=parseFloat(Q("#hydrometer").value.trim());if(window.plato&&(o=0),isNaN(i))alert("tilt值是必需的。");else if(!window.plato&&(isNaN(i)||isNaN(o)))return void alert("tilt值及比重讀數是必需的。");r="&tw="+i+"&hr="+o}confirm("開始新記錄?")&&s_ajax({url:e.starturl+t+r,m:"GET",success:function(e){location.reload()},fail:function(e){alert("無法開始記錄:"+e)}})}},recording:function(e,t){this.logging=!0;var r=new Date(1e3*t);Q("#start-log-date").innerHTML=r.toLocaleString(),Q("#loggingtitle").innerHTML=e,Q("#logstartinput").style.display="none",Q("#logstopinput").style.display="block"},stop:function(){this.logging=!1,Q("#logstartinput").style.display="block",Q("#logstopinput").style.display="none"},rm:function(e){var t=this;confirm("刪除記錄 "+t.ll[e].name)&&(console.log("rm "+t.ll[e].name),s_ajax({url:t.rmurl+e,m:"GET",success:function(r){var i=JSON.parse(r);t.fs=i,t.fsinfo(i.size,i.used),t.ll.splice(e,1),t.list(t.ll)},fail:function(e){alert("無法刪除:"+e)}}))},dl:function(e){window.open(this.dlurl+e)},list:function(e){for(var t,r=Q("#loglist").querySelector("tbody");t=r.querySelector("tr:nth-of-type(2)");)r.removeChild(t);var i=this,o=i.row;e.forEach(function(e,t){var n=e.name,a=new Date(1e3*e.time),l=o.cloneNode(!0);l.querySelector(".logid").innerHTML=n,l.querySelector(".logdate").innerHTML=a.toLocaleString(),l.querySelector(".dlbutton").onclick=function(){i.dl(t)},l.querySelector(".rmbutton").onclick=function(){i.rm(t)},r.appendChild(l)})},init:function(){var e=this;Q("#startlogbutton").onclick=function(){e.startlog()},Q("#stoplogbutton").onclick=function(){e.stoplog()},e.row=Q("#loglist").querySelector("tr:nth-of-type(2)"),e.row.parentNode.removeChild(e.row),s_ajax({url:e.url,m:"GET",success:function(t){var r=JSON.parse(t);if(e.fs=r.fs,r.rec&&e.recording(r.log,r.start),e.ll=r.list,e.list(r.list),e.fsinfo(r.fs.size,r.fs.used),void 0!==r.plato&&r.plato){window.plato=!0;for(var i=document.querySelectorAll(".tiltwatercorrect"),o=0;o<i.length;o++)i[o].style.display="none"}else window.plato=!1},fail:function(e){alert("失敗:"+e)}})}};function checkurl(e){e.value.trim().startsWith("https")&&alert("不支援HTTPS!")}function checkformat(e){e.value.length>256&&(e.value=t.value.substring(0,256)),Q("#fmthint").innerHTML=e.value.length+"/256"}function cmethod(e){for(var t=document.querySelectorAll('input[name$="method"]'),r=0;r<t.length;r++)t[r].id!=e.id&&(t[r].checked=!1);window.selectedMethod=e.value}function generichttp_get(){if(void 0===window.selectedMethod)return alert("請選擇Method!"),null;var e=Q("#format").value.trim();if("GET"==window.selectedMethod&&new RegExp("s","g").exec(e))return alert("不可使用空白字元"),null;var t={};return t.url=Q("#url").value.trim(),t.format=encodeURIComponent(e.escapeJSON()),t.method=Q("#m_post").checked?"POST":"GET",t.type=Q("#data-type").value.trim(),t.service=0,t}function generichttp_set(e){Q("#service-type").value="generichttp",serviceOption("generichttp"),window.selectedMethod=e.method,Q("#m_"+e.method.toLowerCase()).checked=!0,Q("#url").value=void 0===e.url?"":e.url,Q("#data-type").value=void 0===e.type?"":e.type,Q("#format").value=void 0===e.format?"":e.format,checkformat(Q("#format"))}function ubidots_set(e){Q("#service-type").value="ubidots",serviceOption("ubidots");var t=/http:\/\/([\w\.]+)\.ubidots\.com\/api\/v1\.6\/devices\/(\w+)\/\?token=(\w+)$/.exec(e.url);Q("select[name=ubidots-account]").value="things"==t[1]?1:2,Q("#ubidots-device").value=t[2],Q("#ubidots-token").value=t[3]}function ubidots_get(){var e=Q("#ubidots-device").value.trim();if(!e)return null;var t=Q("#ubidots-token").value.trim();if(!t)return null;var r={};return r.url=1==Q("select[name=ubidots-account]").value?"http://things.ubidots.com/api/v1.6/devices/"+e+"/?token="+t:"http://industrial.api.ubidots.com/v1.6/devices/"+e+"/?token="+t,r.format=encodeURIComponent("{}".escapeJSON()),r.method="POST",r.type="application/json",r.service=1,r}function thingspeak_set(e){Q("#service-type").value="thingspeak",serviceOption("thingspeak");for(var t={},r=e.format.split("&"),i=0;i<r.length;i++){var o=r[i].split("=");t[o[0]]=o[1]}Q("#thingspeak-apikey").value=t.api_key;for(i=1;i<9;i++)Q("select[name=thingspeak-f"+i+"]").value=void 0===t["field"+i]?"unused":t["field"+i].substring(1)}function thingspeak_get(){var e=Q("#thingspeak-apikey").value.trim();if(!e)return null;for(var t=e="api_key="+e,r=1;r<9;r++){var i=Q("select[name=thingspeak-f"+r+"]").value;"unused"!=i&&(t=t+"&field"+r+"=%"+i)}if(t==e)return null;var o={url:"http://api.thingspeak.com/update"};return o.format=encodeURIComponent(t.escapeJSON()),o.method="POST",o.type="application/x-www-form-urlencoded",o.service=0,o}function brewfather_set(e){Q("#service-type").value="brewfather",serviceOption("brewfather");var t=/http:\/\/log\.brewfather\.net\/brewpiless\?id=(\w+)$/.exec(e.url);Q("#brewfather-id").value=t[1];var r=/"id":"([^"]+)"/.exec(e.format);Q("#brewfather-device").value=r[1]}function brewfather_get(e){var t=Q("#brewfather-id").value.trim(),r=Q("#brewfather-device").value.trim();if(!t||!r)return null;var i={};i.url="http://log.brewfather.net/brewpiless?id="+t;var o='{"id":"'+r+'","beerTemp":%b,"beerSet":%B,"fridgeTemp":%f,"fridgeSet":%F,"roomTemp":%r,"gravity":%g,"tiltValue":%t,"auxTemp":%a,"extVolt":%v,"timestamp":%u,"tempUnit":"%U","pressure":%P,"mode":"%M"}';return i.format=encodeURIComponent(o.escapeJSON()),i.method="POST",i.type="application/json",i.service=0,i}function brewersfriend_set(e){Q("#service-type").value="brewersfriend",serviceOption("brewersfriend"),Q("#brewersfriend-url").value=e.url;var t=/"beer":"([^"]+)"/.exec(e.format);Q("#brewersfriend-beer").value=t[1],"P"==/"gravity_unit":"([P|G])"/.exec(e.format)[1]?(Q("#gu-sg").checked=!1,Q("#gu-plato").checked=!0):(Q("#gu-sg").checked=!0,Q("#gu-plato").checked=!1)}function brewersfriend_get(e){var t="%g",r="G";if("gu-plato"==Q('input[name="BF-gu"]:checked').value)t="%p",r="P";var i=Q("#brewersfriend-url").value.trim(),o='{"name":"BrewPiLess","temp": %b,"temp_unit": "%U","gravity":'+t+',"gravity_unit":"'+r+'","ph": "","comment": "","beer":"'+Q("#brewersfriend-beer").value.trim()+'","battery":%v,"RSSI": "","angle": %t}',n={};return n.url=i,n.format=encodeURIComponent(o.escapeJSON()),n.method="POST",n.type="application/json",n.service=2,n}function service_set(e){1==e.service?ubidots_set(e):/http:\/\/api\.thingspeak\.com\//.exec(e.url)?thingspeak_set(e):/http:\/\/log\.brewfather\.net\//.exec(e.url)?brewfather_set(e):/http:\/\/log\.brewersfriend\.com\//.exec(e.url)?brewersfriend_set(e):generichttp_set(e)}function update(){var e,t=Q("#service-type").value,r=Q("#enabled").checked;"generichttp"==t?e=generichttp_get():"ubidots"==t?e=ubidots_get():"thingspeak"==t?e=thingspeak_get():"brewfather"==t?e=brewfather_get():"brewersfriend"==t&&(e=brewersfriend_get()),r&&!e||(e||(e={url:"",format:"",method:"POST",type:"",service:0}),e.enabled=r,e.period=Q("#period").value,e.period<60&&(e.period=60),s_ajax({url:logurl,m:"POST",data:"data="+JSON.stringify(e),success:function(e){alert("完成")},fail:function(e){alert("失敗:"+e)}}))}function remote_init(e){var t={generichttp:1,thingspeak:15,brewfather:900,ubidots:1};Q("#period").onchange=function(){var e=t[Q("#service-type").value];Q("#period").value<e&&(Q("#period").value=e)},serviceOption("generichttp"),s_ajax({url:logurl+"?data=1",m:"GET",success:function(e){var t=JSON.parse(e);void 0!==t.enabled&&(Q("#enabled").checked=t.enabled,Q("#period").value=void 0===t.period?300:t.period,service_set(t))}})}function showformat(e){var t=Q("#formatlist"),r=e.getBoundingClientRect();t.style.display="block",t.style.left=r.right+5+"px",t.style.top=r.bottom+5+"px"}function hideformat(){Q("#formatlist").style.display="none"}function serviceOption(e){for(var t=document.querySelectorAll("#service-opt > div"),r=0;r<t.length;r++){var i=t[r];i.id==e?i.style.display="block":i.style.display="none"}Q("#period").onchange()}function serviceChange(){serviceOption(Q("#service-type").value)}function init(e){function t(){var e=parseFloat(Q("#watertemp").value),t=parseFloat(Q("#caltemp").value),r=Q("#tempunit").value;if(!isNaN(e)&&!isNaN(t)){"C"==r&&(t=C2F(t),e=C2F(e));var i=BrewMath.tempCorrectionF(1,t,e);Q("#hydrometer").value=i.toFixed(3)}}void 0===e&&(e=!1),e||(getActiveNavItem(),Q("#verinfo").innerHTML="v"+JSVERSION),Q("#watertemp").onchange=t,Q("#caltemp").onchange=t,Q("#tempunit").onchange=t,remote_init(e),logs.init()}</script><link href="https://fonts.googleapis.com/css?family=Roboto" rel=stylesheet><style>*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}body,html{height:100%}a{text-decoration:none}html{line-height:1.5;font-family:Roboto,sans-serif;font-weight:400;color:rgba(0,0,0,.87)}@media only screen and (min-width:0){html{font-size:14px}}@media only screen and (min-width:992px){html{font-size:14.5px}}@media only screen and (min-width:1200px){html{font-size:15px}}h1,h2,h3,h4,h5,h6{font-weight:400;line-height:1.1}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}h1{font-size:4.2rem;line-height:110%;margin:2.1rem 0 1.68rem 0}h2{font-size:3.56rem;line-height:110%;margin:1.78rem 0 1.424rem 0}h3{font-size:2.92rem;line-height:110%;margin:1.46rem 0 1.168rem 0}h4{font-size:2.28rem;line-height:110%;margin:1.14rem 0 .912rem 0}h5{font-size:1.64rem;line-height:110%;margin:.82rem 0 .656rem 0}h6{font-size:1rem;line-height:110%;margin:.5rem 0 .4rem 0}em{font-style:italic}strong{font-weight:500}small{font-size:75%}.light{font-weight:300}.thin{font-weight:200}html [layout],html [layout][horizontal],html [layout][vertical]{display:-webkit-box;display:-ms-flexbox;display:flex}html [layout][horizontal]{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}html [layout][vertical]{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}html [flex]{-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:.000000001px;flex-basis:.000000001px}html [layout][center-center],html [layout][cross-center]{-webkit-box-align:center;-ms-flex-align:center;align-items:center}html [layout][cross-end]{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}html [layout][center-center],html [layout][main-center]{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}html [layout][main-justified]{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}html [layout][main-distributed]{-ms-flex-pack:distribute;justify-content:space-around}html [hidden]{display:none!important}html [relative]{position:relative}.header{height:64px;background:#009688;-webkit-box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);padding:0 16px;z-index:2}.header_title{font-size:32px;line-height:64px;color:#fff;margin:0;padding:0}.header_version-display{font-size:14px;color:#fff}@media (max-width:700px){[navigation] [menuToggle]{display:block;position:relative;z-index:1;top:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}[navigation] input{display:none}@media (max-width:700px){[navigation] input{display:block;width:40px;height:32px;position:absolute;top:-7px;left:-5px;cursor:pointer;opacity:0;z-index:2;-webkit-touch-callout:none}[navigation] input:checked~ul{-webkit-transform:scale(1,1);transform:scale(1,1);opacity:1}[navigation] input:checked~span{opacity:1;-webkit-transform:rotate(45deg) translate(-2px,-1px);transform:rotate(45deg) translate(-2px,-1px);background:#232323}[navigation] input:checked~span:nth-last-child(3){opacity:0;-webkit-transform:rotate(0) scale(.2,.2);transform:rotate(0) scale(.2,.2)}[navigation] input:checked~span:nth-last-child(2){opacity:1;-webkit-transform:rotate(-45deg) translate(0,-1px);transform:rotate(-45deg) translate(0,-1px)}}[navigation] span{display:none}@media (max-width:700px){[navigation] span{display:block;width:33px;height:4px;margin-bottom:5px;position:relative;background:#fff;border-radius:3px;z-index:1;-webkit-transform-origin:4px 0;transform-origin:4px 0;-webkit-transition:background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease,-webkit-transform .5s cubic-bezier(.77,.2,.05,1);transition:background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease,-webkit-transform .5s cubic-bezier(.77,.2,.05,1);transition:transform .5s cubic-bezier(.77,.2,.05,1),background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease;transition:transform .5s cubic-bezier(.77,.2,.05,1),background .5s cubic-bezier(.77,.2,.05,1),opacity .55s ease,-webkit-transform .5s cubic-bezier(.77,.2,.05,1)}[navigation] span:first-child{-webkit-transform-origin:0 0;transform-origin:0 0}[navigation] span:nth-last-child(2){-webkit-transform-origin:0 100%;transform-origin:0 100%}}[navigation] .options{list-style-type:none;height:100%}[navigation] .options>li{display:inline-block;height:100%}[navigation] .options a{color:#fff;text-transform:uppercase;height:100%;padding:8px;display:inline-block;line-height:48px;border-bottom:3px solid transparent}[navigation] .options a.active{border-bottom:3px solid #ffc107}[navigation] .options a:hover{border-bottom:3px solid #fff}@media (max-width:700px){[navigation] .options{padding-top:64px;position:fixed;display:block;width:100vw;height:100vh;right:0;top:0;background:#ededed;list-style-type:none;-webkit-font-smoothing:antialiased;-webkit-transform-origin:0 0;transform-origin:0 0;-webkit-transform:translate(100%,0);transform:translate(100%,0);-webkit-transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);transition:-webkit-transform .5s cubic-bezier(.77,.2,.05,1);transition:transform .5s cubic-bezier(.77,.2,.05,1);transition:transform .5s cubic-bezier(.77,.2,.05,1),-webkit-transform .5s cubic-bezier(.77,.2,.05,1)}[navigation] .options>li{display:block;height:auto;text-align:center}[navigation] .options a{color:#222;height:auto;width:100%;display:block}[navigation] .options a.active{color:#ffc107;border:none}[navigation] .options a:hover{background:#ccc;border:none}}.footer{height:40px;background:#222;color:rgba(255,255,255,.87);padding:0 16px}.footer a{color:rgba(255,255,255,.87);font-weight:700}[viewport]{min-height:calc(100% - 104px)}@media (max-width:900px){[viewport]{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important;min-height:0}}[main]{padding:16px;overflow-y:auto}@media (max-width:900px){[main]{overflow:initial}}@media (max-width:599px){[main]>[layout] .chart-legend{width:100%}}@media (max-width:599px){[main]>[layout]{-webkit-box-orient:vertical!important;-webkit-box-direction:normal!important;-ms-flex-direction:column!important;flex-direction:column!important}}.error{position:fixed;left:20px;bottom:50px;background-color:#323232;padding:12px 24px 17px 24px;vertical-align:middle;color:#fff;-webkit-box-shadow:0 7px 18px rgba(0,0,0,.2);box-shadow:0 7px 18px rgba(0,0,0,.2)}.error:empty{display:none}input[type=datetime-local],input[type=number],input[type=password],input[type=text]{width:100%;max-width:280px;margin:16px 0;display:block;border:none;padding:18px 0 10px;border-bottom:solid 1px #009688;-webkit-transition:all .3s cubic-bezier(.64,.09,.08,1);transition:all .3s cubic-bezier(.64,.09,.08,1);background:-webkit-gradient(linear,left top,left bottom,color-stop(96%,rgba(255,255,255,0)),color-stop(4%,#009688));background:linear-gradient(to bottom,rgba(255,255,255,0) 96%,#009688 4%);background-position:-100% 0;background-size:100% 100%;background-repeat:no-repeat;color:#00302c}input[type=datetime-local]:focus,input[type=number]:focus,input[type=password]:focus,input[type=text]:focus{-webkit-box-shadow:none;box-shadow:none;outline:0;background-position:0 0}input[type=datetime-local]:focus::-webkit-input-placeholder,input[type=number]:focus::-webkit-input-placeholder,input[type=password]:focus::-webkit-input-placeholder,input[type=text]:focus::-webkit-input-placeholder{color:#009688;font-size:11px;-webkit-transform:translateY(-20px);transform:translateY(-20px);visibility:visible!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}input[type=datetime-local]:focus:-ms-input-placeholder,input[type=number]:focus:-ms-input-placeholder,input[type=password]:focus:-ms-input-placeholder,input[type=text]:focus:-ms-input-placeholder{color:#009688;font-size:11px;transform:translateY(-20px);visibility:visible!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}input[type=datetime-local]:focus::-ms-input-placeholder,input[type=number]:focus::-ms-input-placeholder,input[type=password]:focus::-ms-input-placeholder,input[type=text]:focus::-ms-input-placeholder{color:#009688;font-size:11px;transform:translateY(-20px);visibility:visible!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}input[type=datetime-local]:focus::placeholder,input[type=number]:focus::placeholder,input[type=password]:focus::placeholder,input[type=text]:focus::placeholder{color:#009688;font-size:11px;-webkit-transform:translateY(-20px);transform:translateY(-20px);visibility:visible!important;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}input[type=datetime-local]:invalid,input[type=number]:invalid,input[type=password]:invalid,input[type=text]:invalid{background:-webkit-gradient(linear,left top,left bottom,color-stop(96%,rgba(255,255,255,0)),color-stop(4%,red));background:linear-gradient(to bottom,rgba(255,255,255,0) 96%,red 4%)}.hide{display:none!important}.btn{display:inline-block;position:relative;cursor:pointer;height:35px;line-height:35px;padding:0 1.5rem;font-size:15px;font-weight:600;letter-spacing:.8px;text-align:center;text-transform:uppercase;vertical-align:middle;white-space:nowrap;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;background-color:transparent;margin-right:8px}.btn[disabled]{color:#bdbdbd}.btn[disabled]:hover{background-color:transparent;cursor:not-allowed}.btn--raised{background-color:#009688;color:#fff;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}.btn--raised:hover{background-color:#00635a}.btn--primary{color:#009688}.btn:hover{background-color:rgba(153,153,153,.2);cursor:pointer}.card{display:block;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);-webkit-transition:all .3s cubic-bezier(.25,.8,.25,1);transition:all .3s cubic-bezier(.25,.8,.25,1);padding:16px;position:relative;margin-bottom:16px}.card:hover{-webkit-box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}.card-footer{padding:16px 0 0;margin:8px 0 0;border-top:1px solid #ccc;text-align:right}.inline-header{width:140px;min-width:140px;font-weight:700;padding-right:8px}.small-heading{font-size:20px;padding:16px 0 8px}.modal{display:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;z-index:1000;-webkit-transition:all .5s cubic-bezier(.23,1,.32,1);transition:all .5s cubic-bezier(.23,1,.32,1);-webkit-transition-delay:0s;transition-delay:0s;background:rgba(0,0,0,.3)}.modal-content{position:relative;padding:2.4rem;background:#fff;background-clip:padding-box;-webkit-box-shadow:0 12px 15px 0 rgba(0,0,0,.25);box-shadow:0 12px 15px 0 rgba(0,0,0,.25);-webkit-transition:all .25s cubic-bezier(.23,1,.32,1);transition:all .25s cubic-bezier(.23,1,.32,1);max-width:600px;padding:2rem}.modal-content h2.message{font-size:18px;font-weight:700;text-transform:uppercase}:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}@-webkit-keyframes ripple{0%{-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}50%{-webkit-box-shadow:0 0 0 15px rgba(0,0,0,.1);box-shadow:0 0 0 15px rgba(0,0,0,.1)}100%{-webkit-box-shadow:0 0 0 15px transparent;box-shadow:0 0 0 15px transparent}}@keyframes ripple{0%{-webkit-box-shadow:0 0 0 1px transparent;box-shadow:0 0 0 1px transparent}50%{-webkit-box-shadow:0 0 0 15px rgba(0,0,0,.1);box-shadow:0 0 0 15px rgba(0,0,0,.1)}100%{-webkit-box-shadow:0 0 0 15px transparent;box-shadow:0 0 0 15px transparent}}.md-radio{margin:8px 0 16px}.md-radio.md-radio-inline{display:inline-block}.md-radio input[type=radio]{display:none}.md-radio input[type=radio]:checked+label:before{border-color:#009688;-webkit-animation:ripple .2s linear forwards;animation:ripple .2s linear forwards}.md-radio input[type=radio]:checked+label:after{-webkit-transform:scale(1);transform:scale(1)}.md-radio label{display:inline-block;height:20px;position:relative;padding:0 30px;margin-bottom:0;cursor:pointer;vertical-align:bottom}.md-radio label:after,.md-radio label:before{position:absolute;content:'';border-radius:50%;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transition-property:border-color,-webkit-transform;transition-property:border-color,-webkit-transform;transition-property:transform,border-color;transition-property:transform,border-color,-webkit-transform}.md-radio label:before{left:0;top:0;width:20px;height:20px;border:2px solid rgba(0,0,0,.54)}.md-radio label:after{top:5px;left:5px;width:10px;height:10px;-webkit-transform:scale(0);transform:scale(0);background:#009688}.switch-input{display:none}.switch-label{position:relative;display:inline-block;min-width:148px;cursor:pointer;font-weight:500;text-align:left;margin:0;padding:4px 0 4px 44px}.switch-label:after,.switch-label:before{content:"";position:absolute;margin:0;outline:0;top:50%;-webkit-transform:translate(0,-50%);transform:translate(0,-50%);-webkit-transition:all .3s ease;transition:all .3s ease}.switch-label:before{left:1px;width:34px;height:14px;background-color:#ddd;border-radius:8px}.switch-label:after{left:0;width:20px;height:20px;background-color:#fafafa;border-radius:50%;-webkit-box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084);box-shadow:0 3px 1px -2px rgba(0,0,0,.14),0 2px 2px 0 rgba(0,0,0,.098),0 1px 5px 0 rgba(0,0,0,.084)}.switch-input:checked+.switch-label:after{background-color:#4caf50;-webkit-transform:translate(80%,-50%);transform:translate(80%,-50%)}.switch-input:checked+label[for=beer-temp].switch-label:after{background-color:#29aa29}.switch-input:checked+label[for=beer-set].switch-label:after{background-color:#f06464}.switch-input:checked+label[for=fridge-temp].switch-label:after{background-color:#59b8ff}.switch-input:checked+label[for=fridge-set].switch-label:after{background-color:#ffa14c}.switch-input:checked+label[for=room-temp].switch-label:after{background-color:#aaa}.switch-input:checked+label[for=gravity].switch-label:after{background-color:#909}.switch-input:checked+label[for=aux-temp].switch-label:after{background-color:#f5e127}.switch-input:checked+label[for=filtersg].switch-label:after{background-color:#000abb}.mdl-data-table th{padding:8px;white-space:nowrap;color:rgba(0,0,0,.541176);font-weight:700;font-family:Helvetica,Arial,sans-serif;font-size:17px;text-align:left}.mdl-data-table tr{height:auto}.mdl-data-table tr:nth-child(even){background-color:#eee}.mdl-data-table td{padding:8px}textarea{display:block;width:100%;border:0;padding:10px 5px;background:#fff no-repeat;background-image:-webkit-gradient(linear,left top,left bottom,from(#009688),to(#009688)),-webkit-gradient(linear,left top,left bottom,from(silver),to(silver));background-image:linear-gradient(to bottom,#009688,#009688),linear-gradient(to bottom,silver,silver);background-size:0 2px,100% 1px;background-position:50% 100%,50% 100%;-webkit-transition:background-size .3s cubic-bezier(.64,.09,.08,1);transition:background-size .3s cubic-bezier(.64,.09,.08,1)}textarea:focus{background-size:100% 3px,100% 1px;outline:0}.hint{padding-left:140px;margin-top:0;padding-top:0;font-style:italic;color:#757575;font-size:12px}#formatlist{display:none;position:absolute;border:1px solid #fff;background:#d3d3d3}.listgrid{margin:4px}</style></head><body onload=init()><header layout horizontal main-justified cross-center relative class=header><h1 class=header_title><span id=hostname>BrewPiLess</span> <span id=verinfo class=header_version-display></span></h1><div navigation><div menutoggle><input type=checkbox> <span></span> <span></span> <span></span><ul class=options><li><a href=/index.htm> 狀態 </a></li><li><a href=/control.htm> 控制 </a></li><li><a href=/logging.htm> 記錄 </a></li><li><a href=/setup.htm> 設定 </a></li><li><a href=/config.htm> 系統 </a></li><li><a href=/gravity.htm> 比重 </a></li><li><a href=/pressure.htm> 壓力 </a></li></ul></div></div></header><div viewport><div main flex><h4> BrewPiless記錄設定 </h4><div class=card><div layout horizontal main-justified cross-center><h5> 雲端記錄 </h5><div><input type=checkbox id=enabled name=enabled class=switch-input checked><label for=enabled class=switch-label style=min-width:0></label></div></div><div layout horizontal cross-center><h6 class=inline-header> 記錄時間間隔: </h6><input type=text id=period size=4> 秒 </div><div layout horizontal cross-center><h6 class=inline-header> Service Type: </h6><div><select id=service-type name=service onchange=serviceChange()><option value=generichttp> Generic HTTP </option><option value=thingspeak>thingspeak.com</option><option value=ubidots>ubidots.com</option><option value=brewfather>Brewfather</option><option value=brewersfriend>Brewer'sFriend</option></select></div></div><div id=service-opt><div id=brewersfriend class=service-options><div layout horizontal cross-center><h6 class=inline-header> Stream URL: </h6><input type=text id=brewersfriend-url size=42></div><div layout horizontal cross-center><h6 class=inline-header> Beer: </h6><input type=text id=brewersfriend-beer size=42></div><div layout horizontal cross-center><h6 class=inline-header> Gravity Unit </h6><div class="md-radio md-radio-inline"><input id=gu-sg type=radio name=BF-gu value=gu-sg checked><label for=gu-sg>SG(1.x)</label></div><div class="md-radio md-radio-inline"><input id=gu-plato type=radio name=BF-gu value=gu-plato><label for=gu-plato>Plato(&deg;P)</label></div></div></div><div id=thingspeak class=service-options><div layout horizontal cross-center><h6 class=inline-header> Write API Key: </h6><input type=text id=thingspeak-apikey size=42></div><div><h6 class=inline-header> Fields: </h6><div><span class=listgrid><label for=thingspeak-f1>Field 1:</label><select name=thingspeak-f1><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span><span class=listgrid><label for=thingspeak-f2>Field 2:</label><select name=thingspeak-f2><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span><span class=listgrid><label for=thingspeak-f3>Field 3:</label><select name=thingspeak-f3><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span><br><span class=listgrid><label for=thingspeak-f4>Field 4:</label><select name=thingspeak-f4><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span><span class=listgrid><label for=thingspeak-f5>Field 5:</label><select name=thingspeak-f5><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span><span class=listgrid><label for=thingspeak-f6>Field 6:</label><select name=thingspeak-f6><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span><br><span class=listgrid><label for=thingspeak-f7>Field 7:</label><select name=thingspeak-f7><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span><span class=listgrid><label for=thingspeak-f8>Field 8:</label><select name=thingspeak-f8><option value=unused>Unused</option><option value=b> 啤酒溫度 </option><option value=B> 啤酒設定溫度 </option><option value=f> 冰箱溫度 </option><option value=F> 冰箱設定溫度 </option><option value=r> 室溫 </option><option value=g> 比重 </option><option value=p> Plato </option><option value=a> iSpindel溫度 </option><option value=v> iSpindel電壓 </option><option value=t> Tilt值 </option><option value=P> Pressure in PSI</option><option value=m> mode in integer</option></select></span></div></div></div><div id=brewfather class=service-options><div layout horizontal cross-center><h6 class=inline-header> ID: </h6><input type=text id=brewfather-id size=42></div><div layout horizontal cross-center><h6 class=inline-header> Device Label: </h6><input type=text id=brewfather-device size=42></div></div><div id=ubidots class=service-options><div layout horizontal cross-center><h6 class=inline-header> Account: </h6><select name=ubidots-account class=nb><option value=1>Educational</option><option value=2>Industrial</option></select></div><div layout horizontal cross-center><h6 class=inline-header> Token: </h6><input type=text id=ubidots-token size=42></div><div layout horizontal cross-center><h6 class=inline-header> Device: </h6><input type=text id=ubidots-device size=42></div></div><div id=generichttp class=service-options><div layout horizontal cross-center><h6 class=inline-header> Method: </h6><div class="md-radio md-radio-inline"><input id=m_get type=radio name=method checked onchange=cmethod(this)><label for=m_get>GET</label></div><div class="md-radio md-radio-inline"><input id=m_post type=radio name=method onchange=cmethod(this)><label for=m_post>POST</label></div><div class="md-radio md-radio-inline"><input id=m_put type=radio name=method onchange=cmethod(this)><label for=m_put>PUT</label></div></div><div layout horizontal cross-center><h6 class=inline-header> URL: </h6><input type=text id=url size=128 placeholder="input link" onchange=checkurl(this)></div><div layout horizontal cross-center><h6 class=inline-header>Data Type:</h6><input type=text id=data-type size=42 placeholder=Content-Type></div><p class=hint>JSON:"application/json", Form Type:"application/x-www-form-urlencoded"</p><div layout horizontal cross-center><h6 class=inline-header> 格式: </h6><div layout vertical style=width:100%><textarea id=format rows=4 cols=64 oninput=checkformat(this)></textarea><div layout horizontal main-justified cross-center><span onmouseover=showformat(this) onmouseout=hideformat()><u>符號...</u></span><span> 字元數: <span id=fmthint>0/256</span></span></div></div></div></div></div><div class=card-footer><button type=button onclick=update() class=btn>更新變更</button></div></div><div class=card><h5> 本地記錄 </h5><div id=logstartinput><div id=logctrl layout horizontal cross-center><h6 class=inline-header> 新記錄檔名: </h6><input type=text id=logname size=24 maxlength=24> <button id=startlogbutton class=btn>開始記錄</button></div><div layout horizontal cross-center><h6 class=inline-header> 選項: </h6></div><div layout horizontal cross-center><h6 class=inline-header> 校正iSpindel </h6><input type=checkbox id=calispindel></div><div layout horizontal cross-center><h6 class=inline-header> 在水中的Tilt值 </h6><input type=text id=tiltinw size=6></div><div layout horizontal cross-center class=tiltwatercorrect><h6 class=inline-header> 比重計讀數: </h6><input type=text id=hydrometer size=6></div><div layout horizontal cross-center class=tiltwatercorrect><h6 class=inline-header> , 或是水溫 @ </h6><input type=text id=watertemp size=4>&deg; 比重計修正溫度 <input type=text id=caltemp size=4>&deg;<select id=tempunit><option value=C>C</option><option value=F>F</option></select></div></div><div id=logstopinput style=display:none> 記錄中 <strong id=loggingtitle></strong> 記錄開始於 <strong id=start-log-date></strong> <button id=stoplogbutton class=btn>停止記錄</button></div><div id=fsinfo> 可使用空間: <span id=fsfree>0</span> Bytes, 已使用空間: <span id=fsused>0</span> Bytes, 全部空間: <span id=fssize>0</span> Bytes</div><h5 class=small-heading> 記錄檔案 </h5><table id=loglist class=mdl-data-table><tr><th> 記錄 </th><th> 日期 </th><th> 動作 </th></tr><tr><td class=logid></td><td class=logdate></td><td><button class="dlbutton btn">下載</button> <button class="rmbutton btn">刪除</button></td></tr></table></div></div></div><footer layout horizontal main-justified cross-center class=footer><span>BrewPiLess by <a href=https://github.com/vitotai/ >vitotai</a></span> <span><a href=https://github.com/vitotai/BrewPiLess/ >project on GitHub</a></span></footer><div id=formatlist><table class=mdl-data-table><tr><th>%b</th><td> 啤酒溫度 </td></tr><tr><th>%B</th><td> 啤酒設定溫度 </td></tr><tr><th>%f</th><td> 冰箱溫度 </td></tr><tr><th>%F</th><td> 冰箱設定溫度 </td></tr><tr><th>%r</th><td> 室溫 </td></tr><tr><th>%g</th><td> 比重 </td></tr><tr><th>%p</th><td> Plato </td></tr><tr><th>%a</th><td> iSpindel溫度 </td></tr><tr><th>%v</th><td> iSpindel電壓 </td></tr><tr><th>%t</th><td> Tilt值 </td></tr><tr><th>%u</th><td> 最後一次回報比重的時間 </td></tr><tr><th>%U</th><td> Temperature in C or F </td></tr><tr><th>%m</th><td> mode in integer </td></tr><tr><th>%M</th><td> mode in character </td></tr><tr><th>%P</th><td> Pressure in PSI </td></tr></table></div></body></html>

Related snippets