语义化UI中的日期选择器

Question

像Bootstrap日期选择器一样，Semantic UI有没有日期选择器？ 我搜索了他们的网站，但没有找到。

Jquery日期选择器很好用，但是UI不太适合我的项目。

- Russell

---

因为答案是否定的。Semantic-ui没有提供日期选择器模块。你应该看看其他的，例如如果我正在使用React，我可能会研究react-datepicker。 - Benson Zhang

如何在输入框中使用React日期选择器 - Russell

Answer 1

目前为止，这里有一个待处理的 pull request：

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

它的效果如下所示：

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

- Abdelouahab

---

那似乎是整个捆绑包，我们如何只获取日历？ - Ross The Boss

请问您能否将日历提取到一个单独的包中？ - Dmitriy Nevzorov

Answer 2

看一下这个Semantic 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>

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

- H6.

---

我们可以在这里设置自定义格式吗？ - Mike U

Answer 3

是的，你需要给输入框添加一个类型属性为“date”。

<input type="date">

这是它的外观：

这里

- kajamaki

---

很遗憾，并非所有的浏览器都支持所谓的HTML5日期和输入类型。请参见：http://caniuse.com/#feat=input-datetime - michaelpoltorak

Answer 4

你可以使用Fomantic UI代替Semantic UI，它具有日历模块。

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

在发布这个问题时（4年前），Fomantic UI还不存在，但现在已经被社区大大改进和扩展。

- wolfgang_rt

---

使用Reactjs中的日历怎么样？ - Sam YC

Answer 5

我也找了一些相关的内容，但是最好的是语义化UI的日期范围选择器。

在初始化过程中，您可以使用一些自定义类使GUI外观与语义化UI相似：

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

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

    timePicker: true
});

- J3Y

Answer 6

如果您想要使用月份名称而不是数字进行自定义格式，例如 2020年3月2日，则可以使用以下方式：

语义类：

<!-- 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;
    }
  }
});

- nandur

---

months是text的一个参数，可以通过引用settings.text.months在formatter对象内访问。月份名称变成var month = settings.text.months[date.getMonth()];。 - pietrop

Answer 7

我更喜欢在Semantic UI中使用jQueryUI的日期选择器。

$(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/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/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>

这个例子可能看起来不太好，但那是因为我喜欢保持简单的例子。

编辑：如果你需要语义化UI表单验证（我比较喜欢），你将不得不两次重新导入semantic.min.js，或者至少在底部重新导入。

- SamPhoenix

Answer 8

如果你已经没有其他选择了，这个日期选择器可能会有所帮助。我正在使用Semantic UI React来开发我的生产应用程序，在尝试了多个第三方库后，我选择了这个模块作为一个好的日期选择器。在一些CSS覆盖之后，选择器本身看起来和感觉就像其他Semantic 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 />}
 />

- Sameer Ingavale