语义用户界面中的日期选择器

Question

是否有任何用于语义用户界面的日期选择器，如引导程序日期选择器？我搜索了他们的网站。但未能获得。

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 module。大量定制，看起来不错。

<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

是的，有， 你必须给你的输入一个日期类型属性，

<input type="date">

This 的样子

Answer 4

我也四处寻找，但我能找到的最好的是Date Range Picker for Semantic UI。

在初始化期间，您可以通过一些自定义类使 GUI 看起来更像语义 UI：

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

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

    timePicker: true
});

Answer 5

您可以使用 Fomantic UI 代替 Semantic UI，后者具有 calendar module。

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

在发布此问题时（4 年前）Fomantic UI 不存在，但同时它已被社区大大改进和扩展。

Answer 6

如果您想要使用月份名称而不是像 02/March/2020 这样的数字的自定义格式，请使用此

语义类：

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

Answer 7

我更喜欢在语义 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/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 两次或至少在底部

Answer 8

如果您没有日期选择器的选项，这可能会有所帮助。我正在为我的生产应用程序使用 Semantic UI React，在尝试了多个第三方库以获得良好的日期选择器之后，我选择了 this module. 在一些 css 覆盖之后，选择器本身看起来和感觉就像其他语义 UI 元素。 This is how mine looks. 它开箱即用，非常容易与 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 />}
 />