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.

Afforest

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. – Koodoo

how to use react datepicker in an input field – Afforest

Answer 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

Deal

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

Could you please extract calendar to a separate bundle? – Widdershins

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

Alford

can we set here a custom format? – Rill

Answer 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

Inject

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

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

Mokpo

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

Tequila

how about using calendar that in Reactjs? – Gunslinger

Answer 6

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

Nomen

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()];. – Jeb

Answer 7

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/[email protected]/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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

Garner

Answer 8

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

Wickedness