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.

Well, because the answer is no. Semantic-ui does not provide a date picker module. You should look at others, for example if I were working with React, I'd probably look into react-datepicker. — Benson Zhang, Oct 19 '15 at 05:21

score 46 · Accepted Answer · answered Feb 04 '16 at 11:07

46

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

answered Feb 04 '16 at 11:07

Abdelouahab

7,331
11
52
82

1

That seems to be the whole bundle, how can we get just the calendar? – Ross The Boss Aug 02 '16 at 12:06
Could you please extract calendar to a separate bundle? – Dmitriy Nevzorov Sep 05 '16 at 14:34

score 24 · Answer 2 · answered Oct 13 '16 at 07:52

24

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

answered Oct 13 '16 at 07:52

disco crazy

31,313
12
80
83

can we set here a custom format? – Mike U Aug 14 '22 at 07:20

score 10 · Answer 3 · edited Jul 31 '17 at 18:14

10

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

<input type="date">

This is how it looks like

edited Jul 31 '17 at 18:14

eshirima

3,837
5
37
61

answered Jul 31 '17 at 15:39

kajamaki

109
1
2

4

Unfortunately, not all browsers support so-called HTML5 date and input types. See: http://caniuse.com/#feat=input-datetime – michaelpoltorak Aug 21 '17 at 10:13

score 6 · Answer 4 · answered Oct 18 '15 at 19:31

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

wolfgang_rt · Answer 5 · 2019-11-19T05:59:03.640

6

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.

edited Nov 19 '19 at 05:59

answered Oct 30 '19 at 15:54

wolfgang_rt

154
1
7

how about using calendar that in Reactjs? – Sam YC Sep 08 '20 at 08:11

score 1 · Answer 6 · answered Mar 06 '20 at 06:19

If you want custom format with name of months instead of number like this 02/March/2020, then use this

Semantic classes:

<!-- Calendar picker -->
<div class="field">
  <div class="ui calendar" id="ffa_mar1_cal">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date">
    </div>
  </div>
</div>

JQuery:

//custom calendar
var months = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
$('#ffa_mar1_cal').calendar({
  type: 'date',
  monthFirst: false,
  formatter: {
    date: function (date, settings) {
      if (!date) return '';
      var day = date.getDate();
      var month = months[date.getMonth()];
      var year = date.getFullYear();
      return day + '/' + month + '/' + year;
    }
  }
});

`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()];`. — pietrop, Apr 26 '20 at 09:30

SamPhoenix · Answer 7 · 2019-10-02T07:20:54.373

i prefer using the jqueryui datepicker inside of semantic ui:

$(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/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/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>

this example might not look as good as it could, but thats because i prefer keeping the example simple.

edit: if you need semantic ui form validation (witch I prefer) you will have to reimport semantic.min.js twice or at least at the bottom

score 0 · Answer 8 · answered Oct 16 '19 at 20:37

If you're out of options for a date-picker, this might help. I am using Semantic UI React for my production app and after trying multiple third party libraries for a good date-picker, I settled on this module. The picker itself looks and feels like other Semantic UI elements after some css overrides. This is how mine looks. It works great out of the box and is super easy to use with React and Hooks. For example, it takes a prop called "customInput" that renders any JSX element in place of the date input field.

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

Datepicker in semantic ui

8 Answers8