语义中的日期选择器 ui

Question

是否有像bootstrap日期选择器那样的语义ui日期选择器？我搜索了他们的网站。但是获取不到。

Jquery 日期选择器工作得很好，但 UI 不适合我的项目。

Answer 1

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

在初始化过程中，您可以让 GUI 看起来主要是语义 UI'ish 与一些自定义类:

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

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

    timePicker: true
});

Answer 2

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

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

这是它的样子

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

Answer 3

看看这个 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 4

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

<input type="date">

This是这样子的

Answer 5

我更喜欢在语义中使用 jqueryui 日期选择器 ui:

$(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 6

如果您没有日期选择器选项，这可能会有所帮助。我正在为我的生产应用程序使用 Semantic UI React，并且在尝试了多个第三方库以获得良好的日期选择器之后，我决定使用 this module. The picker itself looks and feels like other Semantic UI elements after some css overrides. This is how mine looks. 它开箱即用并且非常易于使用反应和钩子。例如，它需要一个名为 "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 />}
 />

Answer 7

您可以使用语义 UI 而不是语义 UI，后者具有 calendar module.

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

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

Answer 8

如果你想要使用月份名称而不是像这样的数字的自定义格式 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;
    }
  }
});

语义中的日期选择器 ui

Datepicker in semantic ui

jquery

datepicker

jquery-ui-datepicker

semantic-ui