Datepicker в семантике ui

Ответ 1

В это время написания здесь есть запрос на ожидание:

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

Вот как выглядит

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

Ответ 2

Взгляните на этот модуль семантического пользовательского интерфейса, который является результатом вышеупомянутого запроса на растяжение. Много настроек и выглядит хорошо.

<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();

Ответ 3

Да, есть, вам нужно будет указать в качестве входных данных атрибут типа date,

<input type="date">

Это как это выглядит

Ответ 4

Я также посмотрел вокруг, но лучшее, что я мог найти, было Выбор диапазона дат для семантического интерфейса.

Во время инициализации вы можете заставить графический интерфейс выглядеть в основном Semantic UI'ish с помощью некоторых пользовательских классов:

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

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

    timePicker: true
});

Ответ 5

Я предпочитаю использовать 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>

Ответ 6

Если у вас нет вариантов выбора даты, это может помочь. Я использую Semantic UI React для моего производственного приложения, и после того, как попробовал несколько сторонних библиотек для хорошего средства выбора даты, я остановился на этом модуле. Сам инструмент выбора выглядит и ощущается как другие элементы Semantic UI после некоторого CSS переопределение. Вот так выглядит мой. Он отлично работает из коробки и очень прост в использовании с 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 />}
 />