Datepicker in semantic ui

Question

Is there any datepicker for semantic ui like bootstrap datepicker? I searched their website. But failed to get.

Jquery datepicker is worked nicely but UI does not look nice with my project.

Solution 1

At this time of writing, there is a pending pull request here:

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

Here is how it looks

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

Solution 2

Take a look on this Semantic UI Calendar module which results from the above mentioned pull request. Lots of customization and looks nice.

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

and

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

Solution 3

Yes there is, you'll have to give your input a type attribute of date,

<input type="date">

This is how it looks like

Solution 4

I also looked around for one but the best I could find was Date Range Picker for Semantic UI.

During initialization, you can get the GUI to look mostly Semantic UI'ish with some custom classes:

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

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

    timePicker: true
});

Solution 5

You can use Fomantic UI instead of Semantic UI, which has a calendar module.

Fomantic UI is just a community fork of Semantic UI, so migration will be easy.

At the time of posting this question (4 years ago) Fomantic UI did not exist, but in the meantime it has been greatly improved and extended by the community.

View more solutions

Comments

[Ross The Boss]

That seems to be the whole bundle, how can we get just the calendar?

[Dmitriy Nevzorov]

Could you please extract calendar to a separate bundle?

[michaelpoltorak]

Unfortunately, not all browsers support so-called HTML5 date and input types. See: caniuse.com/#feat=input-datetime

[pietrop]

months is an argument of text which can be accessed inside the formatter object by referencing settings.text.months. The month name becomes var month = settings.text.months[date.getMonth()];.

[Sam YC]

how about using calendar that in Reactjs?