jquery - react - Datepicker en la UI semántica

semantic ui calendar react

Question

¿Hay algún datepicker para ui semántica como bootstrap datepicker? Busqué en su sitio web. Pero no lo conseguí.

Jquery datepicker funciona bien, pero la interfaz de usuario no se ve bien con mi proyecto.

Answer 1

Eche un vistazo en este módulo de Calendario de IU Semántica que resulta de la solicitud de extracción mencionada anteriormente. Mucha personalización y se ve bien.

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

y

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

Answer 2

En este momento de la escritura, hay una solicitud de extracción pendiente aquí:

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

Así es como se ve

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

Answer 3

Sí, hay, tendrás que dar a tu entrada un tipo de atributo de fecha,

<input type="date">

Así es como se ve

Answer 4

También busqué alrededor, pero lo mejor que pude encontrar fue Date Range Picker for Semantic UI .

Durante la inicialización, puede hacer que la GUI busque principalmente UI semántica con algunas clases personalizadas:

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

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

    timePicker: true
});