语义ui中的Datepicker

Question

是否有像bootstrap datepicker这样的语义ui的日期选择器？我搜索了他们的网站.但未能得到.

Jquery datepicker工作得很好,但UI对我的项目看起来并不好看.

Answer 1

在撰写本文时,这里有一个待处理的拉取请求:

https://github.com/Semantic-Org/Semantic-UI/pull/3256

这是它的外观

https://jsbin.com/hubanufuva/1/edit?html,js,output

Answer 2

看一下这个Semantic UI Calendar模块,它是由上面提到的pull请求产生的.很多定制,看起来不错.

<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>

和

$('#example1').calendar();

Answer 3

是的，必须输入一个类型为date的属性，

<input type="date">

这是它的样子

Answer 4

我也环顾四周,但我能找到的最好的是语义UI的日期范围选择器.

在初始化期间,您可以通过一些自定义类使用GUI来查看Semantic UI'ish:

// Initialize the daterangepicker
$container.find('input').daterangepicker({
    buttonClasses: "ui mini button",
    applyClass: "positive",
    cancelClass: "cancel",

    // ...
    // ...
    // ...

    timePicker: true
});

Answer 5

您可以使用 Fomantic UI 而不是 Semantic UI，后者具有日历模块。

Fomantic UI 只是 Semantic UI 的一个社区分支，因此迁移将很容易。

在发布这个问题时（4 年前），Fomantic UI 还不存在，但与此同时，社区对其进行了极大的改进和扩展。