Skip to content

Commit 674cc07

Browse files
ChizukuoChizukuo
committed
feat(ui): 增强日期时间选择器功能，优化相关样式
1 parent a596e99 commit 674cc07

3 files changed

Lines changed: 53 additions & 48 deletions

File tree

‎app_cmd/ticker.py‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,54 @@ def ticker_cmd(args: Namespace):
6565
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
6666
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Noto+Serif+SC:wght@600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
6767
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
68+
<script>
69+
(function(){
70+
function enhance(){
71+
var root=document.getElementById('btb-time-start');
72+
if(!root){setTimeout(enhance,300);return;}
73+
var input=root.querySelector('input[type="text"],textarea');
74+
if(!input){setTimeout(enhance,300);return;}
75+
if(root.dataset.enhanced) return;
76+
root.dataset.enhanced='1';
77+
var ghost=document.createElement('input');
78+
ghost.type='datetime-local';ghost.step='1';
79+
ghost.className='btb-picker-ghost';ghost.tabIndex=-1;
80+
var btn=document.createElement('button');
81+
btn.type='button';btn.className='btb-picker-trigger';
82+
btn.title='打开日历选择器';
83+
btn.innerHTML='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>';
84+
var wrapper=document.createElement('div');
85+
wrapper.className='btb-picker-wrap';
86+
wrapper.style.position='relative';
87+
wrapper.style.display='block';
88+
wrapper.style.width='100%';
89+
input.parentNode.insertBefore(wrapper,input);
90+
wrapper.appendChild(input);
91+
wrapper.appendChild(ghost);
92+
wrapper.appendChild(btn);
93+
btn.addEventListener('click',function(e){
94+
e.preventDefault();e.stopPropagation();
95+
if(input.value){
96+
try{ghost.value=input.value.trim().replace(' ','T');}catch(ex){}
97+
}
98+
ghost.showPicker();
99+
});
100+
ghost.addEventListener('input',function(){
101+
var v=this.value;if(!v)return;
102+
var dt=v.replace('T',' ');
103+
if(dt.length===16)dt+=':00';
104+
var setter=Object.getOwnPropertyDescriptor(
105+
Object.getPrototypeOf(input),'value'
106+
).set;
107+
setter.call(input,dt);
108+
input.dispatchEvent(new Event('input',{bubbles:true}));
109+
});
110+
}
111+
if(document.readyState==='loading')
112+
document.addEventListener('DOMContentLoaded',enhance);
113+
else setTimeout(enhance,500);
114+
})();
115+
</script>
68116
""",
69117
) as demo:
70118
with gr.Column(elem_classes="btb-app-shell"):

‎assets/style.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1154,10 +1154,13 @@ body .gradio-container .dropdown .single-select {
11541154
.btb-picker-ghost {
11551155
position: absolute;
11561156
opacity: 0;
1157-
width: 0;
1158-
height: 0;
1157+
width: 100%;
1158+
height: 100%;
1159+
left: 0;
1160+
top: 0;
11591161
pointer-events: none;
11601162
overflow: hidden;
1163+
z-index: -1;
11611164
}
11621165

11631166
.btb-picker-trigger {

‎tab/go.py‎

Lines changed: 0 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -174,52 +174,6 @@ def go_tab(demo: gr.Blocks):
174174
elem_classes="btb-time-input btb-has-picker",
175175
elem_id="btb-time-start",
176176
)
177-
gr.HTML(
178-
"""
179-
<script>
180-
(function(){
181-
function enhance(){
182-
var root=document.getElementById('btb-time-start');
183-
if(!root){setTimeout(enhance,300);return;}
184-
var input=root.querySelector('input[type="text"],textarea');
185-
if(!input){setTimeout(enhance,300);return;}
186-
if(root.dataset.enhanced) return;
187-
root.dataset.enhanced='1';
188-
var ghost=document.createElement('input');
189-
ghost.type='datetime-local';ghost.step='1';
190-
ghost.className='btb-picker-ghost';ghost.tabIndex=-1;
191-
var btn=document.createElement('button');
192-
btn.type='button';btn.className='btb-picker-trigger';
193-
btn.title='打开日历选择器';
194-
btn.innerHTML='<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>';
195-
var wrap=input.closest('.wrap')||input.parentElement;
196-
wrap.style.position='relative';
197-
wrap.appendChild(ghost);wrap.appendChild(btn);
198-
btn.addEventListener('click',function(e){
199-
e.preventDefault();e.stopPropagation();
200-
if(input.value){
201-
try{ghost.value=input.value.trim().replace(' ','T');}catch(ex){}
202-
}
203-
ghost.showPicker();
204-
});
205-
ghost.addEventListener('input',function(){
206-
var v=this.value;if(!v)return;
207-
var dt=v.replace('T',' ');
208-
if(dt.length===16)dt+=':00';
209-
var setter=Object.getOwnPropertyDescriptor(
210-
Object.getPrototypeOf(input),'value'
211-
).set;
212-
setter.call(input,dt);
213-
input.dispatchEvent(new Event('input',{bubbles:true}));
214-
});
215-
}
216-
if(document.readyState==='loading')
217-
document.addEventListener('DOMContentLoaded',enhance);
218-
else setTimeout(enhance,500);
219-
})();
220-
</script>
221-
"""
222-
)
223177

224178
with gr.Row(elem_classes="btb-inline-actions !justify-end"):
225179
auto_fill_time_btn = gr.Button(

0 commit comments

Comments
 (0)