jQuery 语义 ui 中的日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33201533/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Datepicker in semantic ui
提问by nikolas
Is there any datepicker for semantic ui like bootstrap datepicker? I searched their website. But failed to get.
是否有任何用于语义 ui 的日期选择器，例如引导程序日期选择器？我搜索了他们的网站。但是没能拿到。
Jquery datepicker is worked nicely but UI does not look nice with my project.
Jquery datepicker 工作得很好，但我的项目的 UI 看起来不太好。
回答by Abdelouahab
At this time of writing, there is a pending pull request here:
在撰写本文时，这里有一个待处理的拉取请求：
https://github.com/Semantic-Org/Semantic-UI/pull/3256
https://github.com/Semantic-Org/Semantic-UI/pull/3256
Here is how it looks
这是它的外观
回答by H6.
Take a look on this Semantic UI Calendar modulewhich results from the above mentioned pull request. Lots of customization and looks nice.
看看这个由上述拉取请求产生的语义 UI 日历模块。很多定制，看起来不错。
<h3>Input</h3>
<div class="ui calendar" id="example1">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date/Time">
</div>
</div>
and
和
$('#example1').calendar();
回答by kajamaki
回答by J3Y
I also looked around for one but the best I could find was Date Range Picker for Semantic UI.
我也环顾四周，但我能找到的最好的是Date Range Picker for Semantic UI。
During initialization, you can get the GUI to look mostly Semantic UI'ish with some custom classes:
在初始化期间，您可以使用一些自定义类使 GUI 看起来主要是语义 UI：
// Initialize the daterangepicker
$container.find('input').daterangepicker({
buttonClasses: "ui mini button",
applyClass: "positive",
cancelClass: "cancel",
// ...
// ...
// ...
timePicker: true
});
回答by wolfgang_rt
You can use Fomantic UI instead of Semantic UI, which has a calendar module.
您可以使用 Fomantic UI 而不是 Semantic UI，后者具有日历模块。
Fomantic UI is just a community fork of Semantic UI, so migration will be easy.
Fomantic UI 只是 Semantic UI 的一个社区分支，因此迁移将很容易。
At the time of posting this question (4 years ago) Fomantic UI did not exist, but in the meantime it has been greatly improved and extended by the community.
在发布这个问题时（4 年前），Fomantic UI 还不存在，但与此同时，社区对其进行了极大的改进和扩展。
回答by nandur93
If you want custom format with name of months instead of number like this 02/March/2020, then use this
如果您想要使用月份名称而不是像这样的数字的自定义格式02/March/2020，请使用此
Semantic classes:
语义类：
<!-- Calendar picker -->
<div class="field">
<div class="ui calendar" id="ffa_mar1_cal">
<div class="ui input left icon">
<i class="calendar icon"></i>
<input type="text" placeholder="Date">
</div>
</div>
</div>
JQuery:
查询：
//custom calendar
var months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
$('#ffa_mar1_cal').calendar({
type: 'date',
monthFirst: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = months[date.getMonth()];
var year = date.getFullYear();
return day + '/' + month + '/' + year;
}
}
});
回答by SamPhoenix
i prefer using the jqueryui datepicker inside of semantic ui:
我更喜欢在语义 ui 中使用 jqueryui datepicker：
$(document).ready(function () {
$('.ui.form').form({
fields: {
name: 'minLength[1]',
}
});
$("#_datepicker").datepicker();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form class="ui form" method="post">
<div class="field">
<label>Date</label>
<input name="date" type="text" placeholder="mm/dd/yyyy" value="" id="_datepicker">
</div>
</form>this example might not look as good as it could, but thats because i prefer keeping the example simple.
这个例子可能看起来不那么好，但那是因为我更喜欢保持这个例子简单。
edit: if you need semantic ui form validation (witch I prefer) you will have to reimport semantic.min.js twice or at least at the bottom
编辑：如果您需要语义 ui 表单验证（我更喜欢女巫），您将不得不重新导入 Semantic.min.js 两次或至少在底部重新导入
回答by Sameer Ingavale
If you're out of options for a date-picker, this might help. I am using Semantic UI React for my production app and after trying multiple third party libraries for a good date-picker, I settled on this module.The picker itself looks and feels like other Semantic UI elements after some css overrides. This is how mine looks.It works great out of the box and is super easy to use with React and Hooks. For example, it takes a prop called "customInput" that renders any JSX element in place of the date input field.
如果您没有日期选择器的选项，这可能会有所帮助。我在我的生产应用程序中使用 Semantic UI React，在尝试了多个第三方库以获得良好的日期选择器后，我选择了这个模块。在一些 css 覆盖之后，选择器本身的外观和感觉就像其他语义 UI 元素。这是我的样子。它开箱即用，非常容易与 React 和 Hooks 一起使用。例如，它需要一个名为“customInput”的道具来呈现任何 JSX 元素来代替日期输入字段。
const [startDate, setStartDate] = useState(new Date());
const ExampleCustomInput = ({ value, onClick }) => (
<Button basic onClick={onClick}>
{value}
</Button>
);
<DatePicker
selected={startDate}
onChange={(date) => setStartDate(date)}
customInput={<ExampleCustomInput />}
/>
