### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# Datepicker

### Bulma Datetimepicker

This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a date and time picker. Use the `type="datetime"` attribute on the input. Please reference the plugin documentation for more details about usage.

          //JS CODE
          bulmaCalendar.attach('#bulma-datepicker-7', {
              color: themeColors.primary,
              lang: 'en'
          });

          //MARKUP
          <div class="field">
              <div class="control">
                  <input id="bulma-datepicker-7" class="input">
              </div>
          </div>

### Bulma Datepicker

This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a date picker. Use the `type="date"` attribute on the input. Please reference the plugin documentation for more details about usage.

          //JS CODE
          bulmaCalendar.attach('#bulma-datepicker-1', {
              color: themeColors.primary,
              lang: 'en'
          });

          //MARKUP
          <div class="field">
              <div class="control">
                  <input id="bulma-datepicker-1" class="input" type="date">
              </div>
          </div>

### Bulma Datepicker Modal

This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a modal date picker. Use the `type="date"` attribute on the input. Also use the `displayMode: 'dialog'` option in the javascript code for it to display as a modal. Please reference the plugin documentation for more details about usage.

          //JS CODE
          bulmaCalendar.attach('#bulma-datepicker-2', {
              displayMode: 'dialog',
              startDate: new Date('02/11/2018'),
              minDate: '01/01/2018',
              maxDate: '12/31/2018',
              color: themeColors.primary,
              lang: 'en'
          });

          //MARKUP
          <div class="field">
              <div class="control">
                  <input id="bulma-datepicker-2" class="input" type="date">
              </div>
          </div>

### Bulma Datepicker Inline

This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows an inline date picker. Use the `type="date"` attribute on the input. Also use the `displayMode: 'inline'` option in the javascript code for it to display inline. Please reference the plugin documentation for more details about usage.

          //JS CODE
          bulmaCalendar.attach('#bulma-datepicker-3', {
              displayMode: 'inline',
              startDate: new Date('02/11/2018'),
              minDate: '01/01/2018',
              maxDate: '12/31/2018',
              color: themeColors.primary,
              lang: 'en'
          });

          //MARKUP
          <div class="field">
              <div class="control">
                  <input id="bulma-datepicker-3" class="input" type="date">
              </div>
          </div>

### Bulma Daterange Picker

This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a range picker. Use the `type="date"` and the `data-is-range="true"` attributes on the input. Please reference the plugin documentation for more details about usage.

          //JS CODE
          bulmaCalendar.attach('#bulma-datepicker-4', {
              color: themeColors.primary,
              lang: 'en'
          });

          //MARKUP
          <div class="field">
              <div class="control">
                  <input id="bulma-datepicker-4" class="input" type="date" data-is-range="true">
              </div>
          </div>

### Bulma Timepicker

This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a time picker. Use the `type="time"` attribute on the input. Please reference the plugin documentation for more details about usage.

          //JS CODE
          bulmaCalendar.attach('#bulma-datepicker-5', {
              color: themeColors.primary,
              lang: 'en'
          });

          //MARKUP
          <div class="field">
              <div class="control">
                  <input id="bulma-datepicker-5" class="input" type="time">
              </div>
          </div>

### Bulma Timerange picker

This Bulma vanilla js extension offers a full set of time and date pickers that you can mix in many different ways. This example shows a time range picker. Use the `type="date"` and the `data-is-range="true"` attributes on the input. Please reference the plugin documentation for more details about usage.

          //JS CODE
          bulmaCalendar.attach('#bulma-datepicker-6', {
              color: themeColors.primary,
              lang: 'en'
          });

          //MARKUP
          <div class="field">
              <div class="control">
                  <input id="bulma-datepicker-6" class="input" type="time"> data-is-range="true"
              </div>
          </div>

### Pickaday Datepicker

Huro is integrated with Pikaday, a performant vanilla javascript datepicker library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following example shows you how to use it.

          //JS CODE
          var picker = new Pikaday({
              field: document.getElementById('pickaday-datepicker'),
              format: 'D MMM YYYY',
              onSelect: function() {
                  //Do your stuff
              }
          });

          //MARKUP
          <div class="field">
              <div class="control has-icon">
                  <input id="pickaday-datepicker" class="input" placeholder="select a date">
                  <div class="form-icon">
                      <i data-feather="calendar"></i>
                  </div>
              </div>
          </div>