web-dev-qa-db-ja.com

セマンティックUIのDatepicker

bootstrap datepickerのようなセマンティックUIのdatepickerはありますか？私は彼らのWebサイトを検索しましたが、取得に失敗しました。

Jquery datepickerはうまく動作しますが、私のプロジェクトではUIは見栄えがよくありません。

jquerydatepickerjquery-ui-datepickersemantic-ui
30
nikolas

この記事の執筆時点では、保留中のプルリクエストがここにあります。

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

これがどのように見えるかです

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

40
Abdelouahab

これをご覧ください セマンティックUIカレンダーモジュール これは、上記のプルリクエストの結果です。たくさんのカスタマイズと素敵に見えます。

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

enter image description here

17
H6.

はい、入力に日付のtype属性を指定する必要があります。

<input type="date">

これ はどのように見えるか

7
kajamaki

また、私は1つを探しましたが、私が見つけることができた最高の セマンティックUIの日付範囲ピッカー でした。

初期化中に、いくつかのカスタムクラスを使用して、ほとんどセマンティックUIのように見えるGUIを取得できます。

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

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

    timePicker: true
});
6
J3Y