web-dev-qa-db-fra.com

Datepicker dans l'interface utilisateur sémantique

Existe-t-il un sélecteur de date pour l'interface utilisateur sémantique tel que bootstrap datepicker?)? J'ai effectué une recherche sur leur site Web.

Jquery datepicker fonctionne bien mais l'interface utilisateur ne semble pas agréable avec mon projet.

jquerydatepickerjquery-ui-datepickersemantic-ui
30
nikolas

En ce moment, il y a une demande de pull en attente ici:

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

Voici à quoi ça ressemble

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

40
Abdelouahab

Jetez un coup d'œil à ceci module Calendrier de l'interface utilisateur sémantique qui résulte de la demande d'extraction susmentionnée. Beaucoup de personnalisation et regarde 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>

et

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

enter image description here

17
H6.

Oui, vous devez attribuer à votre entrée un attribut de type date,

<input type="date">

This c'est à quoi ça ressemble

7
kajamaki

J'ai aussi regardé autour de moi, mais le meilleur que j'ai pu trouver était sélecteur de plage de dates pour l'interface utilisateur sémantique .

Lors de l'initialisation, vous pouvez faire en sorte que l'interface graphique ressemble surtout à UI'ish sémantique avec certaines classes personnalisées:

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

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

    timePicker: true
});
6
J3Y