Bootstrap date picker Premium component

The mobile-friendly, responsive and beautiful Date Picker with a ton of options.

Basic example



<div class="container">
  <div class="row">
    <div class="col-md-12">
      <form #myForm="ngForm" novalidate>
        <my-date-picker name="mydate" [options]="myDatePickerOptions" [placeholder]="'Selected date'" [(ngModel)]="model" required></my-date-picker>
      </form>
    </div>
  </div>
</div>

Options

You can declare the following options for your date-picker.

Option Default Description
dayLabels {su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat'} Day labels visible on the selector.
dayLabelsFull {su: "Sunday", mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa: "Saturday"} Full day labels visible on the selector.
monthLabels { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' } Month labels visible on the selector.
monthLabelsFull { 1: "January", 2: "February", 3: "March", 4: "April", 5: "May", 6: "June", 7: "July", 8: "August", 9: "September", 10: "October", 11: "November", 12: "December" } Full month labels visible on the selector.
dateFormat:String yyyy-mm-dd Date format on the selection area and the callback. For example: dd.mm.yyyy, yyyy-mm-dd, dd mmm yyyy (mmm = Month as a text)
todayBtnTxt:String Today Today button text. Can be used if showTodayBtn = true.
clearBtnTxt:String Clear Clear button text.
closeBtnTxt:String Close Close button text.
showTodayBtn:Boolean true Show 'Today' button on calendar.
showClearDateBtn:Boolean true Is clear date button shown or not. Can be used if inline = false.
firstDayOfWeek:String mo First day of week on calendar. One of the following: mo, tu, we, th, fr, sa, su
markCurrentDay:Boolean true Is current day (today) marked on calendar.
minYear:Number 1100 Minimum allowed year in calendar. Cannot be less than 1100.
maxYear:Number 9100 Maximum allowed year in calendar. Cannot be more than 9100.
disableUntil - Disable dates backward starting from the given date. For example: {year: 2016, month: 6, day: 26}. To reset existing disableUntil value set: {year: 0, month: 0, day: 0}
disableSince - Disable dates forward starting from the given date. For example: {year: 2016, month: 7, day: 22}. To reset existing disableSince value set: {year: 0, month: 0, day: 0}
disableDays:Array - Disable single dates one by one. Array of disabled dates. For example: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 1, day: 15}]. To reset existing disableDays value set empty array to it.
enableDays:Array - Enable given dates one by one if the date is disabled. For example if you disable the date range and want to enable some dates in range. Array of enabled days. For example: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 1, day: 15}]. To reset existing enableDays value set empty array to it.
disableDateRanges:Array - Disable date ranges. For example: [{begin: {year: 2016, month: 11, day: 14}, end: {year: 2016, month: 11, day: 20}}]. To reset existing disableDateRanges value set empty array to it.
disableWeekends:Boolean false Disable weekends (Saturday and Sunday).
markDates:Array - Mark dates for different colors. For example: [{dates: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 12, day: 16}], color: '#004198'}, {dates: [{year: 2017, month: 10, day: 1}, {year: 2017, month: 11, day: 4}], color: 'green'}]. To reset existing markDates value set empty array to it.
markWeekends - Mark weekends (Saturday and Sunday). For example: {marked: true, color: 'red'}. Value of color can be any CSS color code. To reset existing markWeekends set: {marked: false, color: ''}
disableHeaderButtons:Boolean true Prevent to change the calendar view with header buttons if previous or next month are fully disabled by disableUntil or disableSince.
showWeekNumbers:Boolean false Are week numbers visible or not on calendar. Can be used if firstDayOfWeek = mo.
height:String 34px mydatepicker height in without selector. Can be used if inline = false.
width:String 100% mydatepicker width. Can be used if inline = false.
selectionTxtFontSize:String 14px Selection area font size. Can be used if inline = false.
openSelectorTopOfInput:Boolean false Open selector top of input field. The selector arrow cannot be shown if this option is true. Can be used if inline = false.
componentDisabled:Boolean false Is selection area input field and buttons disabled or not (input disabled flag). You can also disable component by disabled attribute. Can be used if inline = false.
editableDateField:Boolean true Is selection area input field editable or not (input readonly flag). Can be used if inline = false.
showInputField:Boolean true Is selection area input field shown or not. If not, just show the icon. Can be used if inline = false.
openSelectorOnInputClick:Boolean false Open selector when the input field is clicked. Can be used if inline = false and editableDateField = false.
ariaLabelInputField:String Date input field Aria label text of input field.
ariaLabelClearDate:String Clear Date Aria label text of clear date button.
ariaLabelDecreaseDate:String Decrease Date Aria label text of decrease date button.
ariaLabelIncreaseDate:String Increase Date Aria label text of increase date button.
ariaLabelOpenCalendar:String Open Calendar Aria label text of open calendar button.
ariaLabelPrevMonth:String Previous Month Aria label text of previous month button.
ariaLabelNextMonth:String Next Month Aria label text of next month button.
ariaLabelPrevYear:String Previous Year Aria label text of previous year button.
ariaLabelNextYear:String Next Year Aria label text of next year button. 

import { IMyOptions } from 'your_path/typescripts/pro/date-picker/index';

export class DatepickerPageComponent {        
    
    public myDatePickerOptions: IMyOptions = {
        
        //you can translate the below data to your language
        dayLabels: {su: 'Sun', mo: 'Mon', tu: 'Tue', we: 'Wed', th: 'Thu', fr: 'Fri', sa: 'Sat'},
        dayLabelsFull: {su: "Sunday", mo: "Monday", tu: "Tuesday", we: "Wednesday", th: "Thursday", fr: "Friday", sa: "Saturday"},
        monthLabels: { 1: 'Jan', 2: 'Feb', 3: 'Mar', 4: 'Apr', 5: 'May', 6: 'Jun', 7: 'Jul', 8: 'Aug', 9: 'Sep', 10: 'Oct', 11: 'Nov', 12: 'Dec' },
        monthLabelsFull: { 1: "January", 2: "February", 3: "March", 4: "April", 5: "May", 6: "June", 7: "July", 8: "August", 9: "September", 10: "October", 11: "November", 12: "December" },
        dateFormat: 'dd.mm.yyyy',
        todayBtnTxt: "Today",
        clearBtnTxt: "Clear",
        closeBtnTxt: "Close",
        //you can translate the above data to your language
        showTodayBtn: false,
        showClearDateBtn: false,
        firstDayOfWeek: 'mo',
        markCurrentDay: true,
        minYear: 2015,
        maxYear: 2017,
        disableUntil: {year: 2016, month: 8, day: 10},
        disableSince: {year: 2017, month: 7, day: 22},
        disableDays: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 1, day: 15}],
        enableDays: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 1, day: 15}],
        disableDateRanges: [{begin: {year: 2016, month: 11, day: 14}, end: {year: 2016, month: 11, day: 20}}],
        disableWeekends: true,
        markDates: [
            {
                dates: [{year: 2016, month: 11, day: 14}, {year: 2016, month: 12, day: 16}], 
                color: '#004198'
            }, 
            {
                dates: [{year: 2017, month: 10, day: 2}, {year: 2017, month: 11, day: 6}], 
                color: 'green'
            }
        ],
        markWeekends: {marked: true, color: 'red'},
        disableHeaderButtons: true,
        showWeekNumbers: true,
        height: '100px',
        width: '50%',
        selectionTxtFontSize: '15px',
        openSelectorTopOfInput: false,
        componentDisabled: false,
        editableDateField: false,
        showInputField: true,
        openSelectorOnInputClick: true,
        ariaLabelInputField: 'Your aria input text',
  
    };     
}