标签: semantic-ui
使用react计算javascript中两个日期之间的差异
我试图通过两个日期选择器和两个时间选择器（一个反应组件）来获得两个日期之间的差异。该日期用于预订，我想通过用“开始日期”减去“结束日期”来获取持续时间，但是当我减去两个超过 24 小时的日期时，我得到 -152 或与实际持续时间。
代码
periodReserve = (e, idPark, title ) => {
let Start_Day = this.state.startDate && this.state.startDate.format(Formatdate);
let Start_Hour = this.state.time && this.state.time.format(formatHour);
let End_Day = this.state.endDate && this.state.endDate.format(Formatdate);
let End_Hour = this.state.timeEnd && this.state.timeEnd.format(formatHour);
let diff = this.state.timeEnd - this.state.startDate;
console.log(diff);}
第一个 DatePicker 和 TimePicker 的代码（用于开始）
<DatePicker
id="calendar"
className="TestIcon"
dateFormat='YYYY-MM-DD'
placeholderText="Date de fin"
selected={this.state.startDate}
onChange={this.handleChangeStart}/>
<TimePicker showSecond={false}
placeholder={time}
onChange={this.onChangeStart}> </TimePicker>
第二个dataPicker和TimePicker的代码
<DatePicker
id="calendar"
className="TestIcon"
dateFormat='YYYY-MM-DD'
selected={this.state.endDate}
onChange={this.handleChangeEnd}/>
<TimePicker showSecond={false}
placeholder={timeEnd}
onChange={this.onChangeEnd}> </TimePicker>
推荐指数
解决办法
查看次数
如何更改语义 UI 下拉列表的搜索算法？
我想调整语义 UI 下拉列表中的搜索算法。它仅匹配以搜索文本开头的项目，但我想匹配包含搜索文本的所有项目。是否可以添加自定义搜索？
<select class="ui search selection dropdown">...</select>
推荐指数
解决办法
查看次数
Semamtic UI：禁用与模式相关联的调光器
我有一个接受某些用户输入的模式。如果用户得到正确的答案，则他/她应该能够看到调光器后面的动画。我试过了
$('.basic.modal')
.modal('setting',{
closable : true,
onDeny : function(){},
onApprove : function(){}
})
.modal('hide others')
.modal('show')
.modal('hide dimmer');
和
$('.basic.modal')
.modal('setting',{
closable : true,
onDeny : function(){},
onApprove : function(){}
})
.modal('hide others')
.modal('hide dimmer')
.modal('show');
两者都不起作用。我该怎么办？
推荐指数
解决办法
查看次数
覆盖语义UI样式的问题
我的问题是如何以最简单的方式从语义ui覆盖样式？我编译了语义表，并编写了其他一些CSS表。例如，我有用于列的容器，并且想在开始时将其隐藏，因此我向div添加了一个类，然后将其设置为“ display：none”。但是它仍然显示出来，因为语义上的其他一些样式更重要。这非常不舒服。如何修复它并设置自己的样式以覆盖语义样式？
推荐指数
解决办法
查看次数
语义UI正则表达式解析器似乎无法正常工作
在我的信用卡结帐表格中,我有以下内容:
$('#checkout-info')
.form({
on : 'blur',
fields : {
id_cc_num : { identifier: 'id_cc_num',
optional: true,
rules: []},
id_cc_CVC : { identifier: 'id_cc_CVC',
optional: true,
rules: [{ type: 'regExp[/\d{3,4}/]',
prompt: 'CVC must be three or four digits'}]},
id_cc_month : { identifier: 'id_cc_month',
optional: true,
rules: [{ type: 'integer[1..12]',
prompt: 'MM must be a two-digit month designator - 01 thru 12'}]},
id_cc_year : { identifier: 'id_cc_year',
optional: true,
rules: [{ type: 'integer[2016..2036]',
prompt: 'Year must be at least 2016'}]},
inline : …推荐指数
解决办法
查看次数
语义UI侧栏组件在切换时不保留背景色
我是js和jquery的新手，但我相信自己正确实现了侧边栏。为了在干净的环境中进行测试，我直接从下面的语义UI文档页面复制并粘贴了示例代码：
http://semantic-ui.com/modules/sidebar.html
<body>
<div class="ui sidebar inverted vertical menu">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
</div>
<div class="pusher">
<button class="ui button">Click me</button>
</div>
</body>
$(function(){
$("button").click(function(){
$(".ui.sidebar").sidebar('toggle')
});
});
将侧栏切换为打开状态后，语义会将主体背景颜色更改为白色，并在顶部带有“ dimmer div”。将侧栏切换为关闭时，它不会保留背景色。
我试图破解一些语义上的替代，但是我无法使其保留背景色。语义在两个地方更改背景颜色。
理想情况下，我不想“破解”语义，因为我是直接从网站上复制此代码，而在Stack Overflow上找不到关于它的任何其他问题，我是否缺少某些东西？
Codepen：http：//codepen.io/nextuniverse/pen/JKYNXy
更新：感谢Ariel的回应，我更新了Codepen以反映正确的标记和样式。
推荐指数
解决办法
查看次数
语义ui网格 - 显示列的全宽,隐藏"仅计算机"列之后
对于计算机大小的屏幕,我在左侧有一个额外的列来显示一些可选内容.当屏幕大小低于991px的断点时,该列隐藏使用semantic-ui的本机css类.在这种情况下,具有主要内容的列应以全宽显示.我想知道是否有一种"原生的"语义方式来实现这一目标？
<div class="ui grid container">
<div class="four wide computer only column">
(Optional content only for computers sized screen)
</div>
<div class="twelve wide column">
(Main Content)
</div>
</div>
推荐指数
解决办法
查看次数
语义UI下拉列表 - 将图像显示为图标？
在https://jsfiddle.net/hodtfkys/3/中,如何让它始终显示http://jsfiddle.net/t9vfxo5t/中显示的图像,而不仅仅是当用户下拉列表时？
仅在下拉列表时显示图像:
<div class='ui icon selection dropdown'>
<input name='DropDownListCategoryClone' type='hidden'> <i class='dropdown icon'></i>
<div class='default text'>
Male
</div>
<div class='menu'>
<div class='item' data-text='Male' data-value='male'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'> Male
</div>
<div class='item' data-text='Female' data-value='female'>
<img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'> Female
</div>
</div>
</div>
图标始终显示:
<div class="ui selection dropdown">
<input type="hidden" name="language">
<i class="dropdown icon"></i>
<div class="default text">Select language</div>
<div class="menu">
<div class="item" data-value="gb"><i class="gb flag"></i>English</div>
<div class="item" data-value="es"><i class="es flag"></i>Spanish</div>
</div>
</div>
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何使sematic-ui-react Tab响应？
我正在开发一个React应用程序，最近我开始使用语义ui react模块。
不幸的是，我无法使Tab对象响应...
一个非常简单的脚本可以显示以下内容：
import React from 'react'
import { withRouter } from 'react-router-dom'
import {Tab} from 'semantic-ui-react';
// import NavSection from './NavSection'
var sections = ["SectionA","SectionB","SectionC","SectionD","SectionE","SectionF"]
const NavigatorHeader = () => (
<div>
<h1>Navigator</h1>
<div>
<Tab menu={{ pointing: true }} panes={getPanes(sections)} />
</div>
</div>
)
export default withRouter(NavigatorHeader)
function getPanes(sections){
return sections.map( function(section){
return {
menuItem: section,
render: () =>
<Tab.Pane attacched="false">
<div>
<p>
Some Text that we can change tab from tab. E.g. with the title: <b>{section}</b>
</p> …推荐指数
解决办法
查看次数
标签 统计
semantic-ui ×10
javascript ×4
css ×3
jquery ×3
html ×2
reactjs ×1
regex ×1
sidebar ×1
validation ×1