انتخاب تاریخ

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

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

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

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

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

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

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

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