前提・実現したいこと
簡単な予約システムを作っています。
inputを入力したデータを定数busyに渡したいです。
document.getElementById ``` それと出来れば上記の三項演算子で×となっている曜日はその曜日の隔週すべて×と表記させる方法を知りたいです。 ### 発生している問題・エラーメッセージ 現状では```js```内の配列に書き込むと×マークが表記されるのですが、それをview画面で操作できるようにしたいです。 ```html <!--date--> <input type="date" value="2019-1-1" id="dates"> <!--start to finish time--> <input type="time" value="10:00" id="time_start"> <input type="time" value="19:00" id="time_finish">
js
1const BUSY = [ 2 '2019-02-12T10:00', 3 '2019-02-12T10:30', 4 '2019-02-13T10:00', 5 '2019-02-02T10:00', 6 '2019-02-02T10:30', 7 '2019-02-03T10:00', 8 '2019-02-03T10:30', 9 '2019-02-09T10:00', 10 '2019-02-09T10:30', 11 '2019-02-09T23:30' 12];
js
1//monday clicked 2document.getElementById("mon").addEventListener( 'click', function( event ) { 3 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 4 event.currentTarget.innerText = text; 5} ); 6//tuesday clicked 7document.getElementById("tue").addEventListener( 'click', function( event ) { 8 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 9 event.currentTarget.innerText = text; 10} ); 11//wednesday clicked 12document.getElementById("wed").addEventListener( 'click', function( event ) { 13 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 14 event.currentTarget.innerText = text; 15} ); 16//thursday clicked 17document.getElementById("thu").addEventListener( 'click', function( event ) { 18 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 19 event.currentTarget.innerText = text; 20} ); 21//Friday clicked 22document.getElementById("fri").addEventListener( 'click', function( event ) { 23 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 24 event.currentTarget.innerText = text; 25} ); 26//saturday clicked 27document.getElementById("sat").addEventListener( 'click', function( event ) { 28 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 29 event.currentTarget.innerText = text; 30} ); 31//sunday clicked 32document.getElementById("sun").addEventListener( 'click', function( event ) { 33 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 34 event.currentTarget.innerText = text; 35} );
該当のソースコード
js
1<script> 2{ 3 const 4 day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'], 5 day_jname = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'], 6 doc = document; 7 8 const 9 A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))), 10 B = (d, n) => d.setDate (d.getDate () + n), 11 C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''), 12 D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 13 E = (e, d) => { 14 let 15 [a,,b] = A (e, 'label', 'br', 'label'), 16 w = d.getDay () ; 17 a.textContent = d.getDate (); 18 b.textContent = day_jname[w]; 19 e.classList.add (day_name[w]); 20 }, 21 F = d => { 22 let m = d.getMonth (); 23 return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 + 24 (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m); 25 }, 26 G = ary => ary.reduce ((a, b) => { 27 let 28 c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b, 29 d = D (c); 30 if (! (d in a)) a[d] = []; 31 a[d][F(c)] = true; 32 return a; 33 }, { }) 34 , 35 H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()), 36 I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':') 37 ; 38 39 40 class Shedule { 41 constructor (date = new Date, range = 7, plan = []) { 42 this.current = H (date); 43 this.date = H (date); 44 this.range = range; 45 this.plan = G (plan); 46 this.table = document.createElement ('table'); 47 48 this.remake (); 49 } 50 51 52 add (day = this.range) { 53 let d = H (this.current); 54 d.setDate (d.getDate () + day); 55 if (+this.date <= +d) { 56 this.current = d; 57 this.remake (); 58 } 59 } 60 61 62 remake () { 63 this.prev_btn = this.next_btn = null; 64 let t = this.table; 65 [...t.childNodes].forEach (e => e.remove ()); 66 67 let 68 h = t.createTHead (), 69 tr0 = h.insertRow (-1), 70 tr1 = h.insertRow (-1), 71 d = H (this.current), 72 s = tr0.insertCell (-1), 73 c = 1, 74 m = d.getMonth (); 75 76 for (let i = 0; i < this.range; i++, c++, B (d, 1)) { 77 let td = tr1.insertCell (-1); 78 if (m !== d.getMonth ()) { 79 s.colSpan = c - 1; 80 s = tr0.insertCell (-1); 81 m = d.getMonth (); 82 c = 1; 83 } 84 s.textContent = C (d); 85 E (td, d); 86 } 87 s.colSpan = c - 1; 88 89 let e = tr0.insertCell (0); 90 e.textContent = '前の一週間'; 91 e.classList.add ('button'); 92 e.rowSpan = 2; 93 this.prev_btn = e; 94 95 e = tr0.insertCell (-1); 96 e.textContent = '次の一週間'; 97 e.classList.add ('button'); 98 e.rowSpan = 2; 99 this.next_btn = e; 100 101 //start--時間の時と分の分割処理 102 var name_start = document.getElementById('sample').value; 103 104 var result = name_start.substr( 0, 2 ); 105 var result2 = name_start.substr( 3, 4 ); 106 107 var hour_start = result, minutes_start = result2; 108 //---end 109 110 //finish 111 var name_finish = document.getElementById('sample2').value; 112 113 var result_finish = name_finish.substr( 0, 2 ); 114 var result2_finish = name_finish.substr( 3, 4 ); 115 116 var hour_end = result_finish, minutes_end = result2_finish; 117 118 //---end 119 let 120 begin = new Date (Date.UTC (1970,0,1, hour_start, minutes_start)),//列のスタート時間 //ここをどうにかしたい。 121 end = new Date (Date.UTC (1970,0,1, hour_end, minutes_end)),//列の終了時間 //ここをどうにかしたい 122 step = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間 123 o = F (this.current), 124 rst = [ ]; 125 126 for (let d = begin; d < end; d = new Date (+step + (+d))) { 127 let 128 a = new Array (this.rangi), 129 b = I (d), 130 c = this.plan[b] || []; 131 132 for (let i = 0; i < this.range; i++) 133 a[i] = c[o + i] ? '-' : '◎'; 134 135 rst.push ([b, ...a, b]); 136 } 137 138 let [tb] = A (t, 'tbody'); 139 rst.forEach (r => { 140 let tr = tb.insertRow (-1); 141 r.forEach (c => tr.insertCell (-1).textContent = c) 142 }); 143 144 } 145 146 handleEvent ({target: t}) { 147 if (t === this.prev_btn) this.add (-this.range); 148 if (t === this.next_btn) this.add (this.range); 149 } 150 151 } 152 153 this.Shedule = Shedule; 154} 155 156const BUSY = [ 157 '2019-02-12T10:00', 158 '2019-02-12T10:30', 159 '2019-02-13T10:00', 160 '2019-02-02T10:00', 161 '2019-02-02T10:30', 162 '2019-02-03T10:00', 163 '2019-02-03T10:30', 164 '2019-02-09T10:00', 165 '2019-02-09T10:30', 166 '2019-02-09T23:30' 167]; 168 169 170let a = new Shedule (new Date, 14, BUSY), {table: b} = a; 171document.querySelector ('#calendar').appendChild (b); 172b.addEventListener ('click', a, false); 173 174/*let c = new Shedule (new Date,7,BUSY), {table: d} = c; 175document.querySelector ('#calendar').appendChild (d); 176d.addEventListener ('click', c, false);*/ 177 178var today = new Date(); 179var year = today.getFullYear(); 180var month = today.getMonth() + 1; 181var day = today.getDate(); 182var tds = document.querySelectorAll('td'); 183var yobi= new Array("日","月","火","水","木","金","土"); 184document.getElementById('acdn-target').value = year+'年'+month+'月'+ day+'日 '+yobi[day]+'曜日'; 185 186 187document.querySelector('#calendar').addEventListener('click', event => { 188 const target = event.target; 189 if (target.nodeName.toLowerCase() !== 'td') { 190 return true; 191 } 192 const time = target.parentNode.cells[0].textContent; 193 const table = target.closest('table'); 194 const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent; 195 196 document.getElementById('acdn-target').value = year+'年'+ month + '月' + date + '日' +yobi[day]+'曜日'+ time; 197 return true; 198}, false); 199 200//monday clicked 201document.getElementById("mon").addEventListener( 'click', function( event ) { 202 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 203 event.currentTarget.innerText = text; 204} ); 205//tuesday clicked 206document.getElementById("tue").addEventListener( 'click', function( event ) { 207 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 208 event.currentTarget.innerText = text; 209} ); 210//wednesday clicked 211document.getElementById("wed").addEventListener( 'click', function( event ) { 212 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 213 event.currentTarget.innerText = text; 214} ); 215//thursday clicked 216document.getElementById("thu").addEventListener( 'click', function( event ) { 217 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 218 event.currentTarget.innerText = text; 219} ); 220//Friday clicked 221document.getElementById("fri").addEventListener( 'click', function( event ) { 222 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 223 event.currentTarget.innerText = text; 224} ); 225//saturday clicked 226document.getElementById("sat").addEventListener( 'click', function( event ) { 227 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 228 event.currentTarget.innerText = text; 229} ); 230//sunday clicked 231document.getElementById("sun").addEventListener( 'click', function( event ) { 232 var text = ( event.currentTarget.innerText === '○' ) ? '×' : '○'; 233 event.currentTarget.innerText = text; 234} ); 235 236</script>
試したこと
htmlから日時までを取得することができました。
js
1var abc = document.getElementById('off_date').value; 2var bcd = document.getElementById('off_start').value; 3var cde = document.getElementById('off_finish').value; 4console.log(abc + bcd + '~' + cde);//19年02月06日08:00~20:00
補足情報(FW/ツールのバージョンなど)
javascript
これ、難読化かけてるなら変換前のコードを張ってほしいのですが……
回答1件
あなたの回答
tips
プレビュー