Bootstrap Birthday Picker Plugin Examples

Default

$('#element').bootstrapBirthday({
  widget: {
    wrapper: {
      tag: 'div',
      class: 'input-group'
    },
    wrapperYear: {
      use: true,
      tag: 'span',
      class: 'input-group-addon'
    },
    wrapperMonth: {
      use: true,
      tag: 'span',
      class: 'input-group-addon'
    },
    wrapperDay: {
      use: true,
      tag: 'span',
      class: 'input-group-addon'
    },
    selectYear: {
      name: 'birthday[year]',
      class: 'form-control input-sm'
    },
    selectMonth: {
      name: 'birthday[month]',
      class: 'form-control input-sm'
    },
    selectDay: {
      name: 'birthday[day]',
      class: 'form-control input-sm'
    }
  }
});
        

"row" and "col-xx" template

$('#element').bootstrapBirthday({
  widget: {
    wrapper: {
      tag: 'div',
      class: 'row'
    },
    wrapperYear: {
      use: true,
      tag: 'div',
      class: 'col-sm-4'
    },
    wrapperMonth: {
      use: true,
      tag: 'div',
      class: 'col-sm-4'
    },
    wrapperDay: {
      use: true,
      tag: 'div',
      class: 'col-sm-4'
    },
    selectYear: {
      name: 'birthday[year]',
      class: 'form-control'
    },
    selectMonth: {
      name: 'birthday[month]',
      class: 'form-control'
    },
    selectDay: {
      name: 'birthday[day]',
      class: 'form-control'
    }
  }
});
        

Disabled wrappers

$('#element').bootstrapBirthday({
  widget: {
    wrapper: {
      tag: 'div',
      class: ''
    },
    wrapperYear: {
      use: false
    },
    wrapperMonth: {
      use: false
    },
    wrapperDay: {
      use: false
    },
    selectYear: {
      name: 'birthday[year]',
      class: 'form-control'
    },
    selectMonth: {
      name: 'birthday[month]',
      class: 'form-control'
    },
    selectDay: {
      name: 'birthday[day]',
      class: 'form-control'
    }
  }
});