pitched-datepicker.js

Pitched Datepicker plugin.

Usage

Include the styles in the head, and the script before the closing body tag.

<link rel="stylesheet" href="dist/pitched-datepicker.min.css" />
<script type="text/javascript" src="dist/pitched-datepicker.min.js"></script>

Or, if using npm

npm install pitched-datepicker

Initialize the pitched datepicker

var el = document.getElementById('demo');
var dp = new PitchedDatepicker(el, {
    minDate: new Date(2020, 1, 1),      // optional
    maxDate: new Date(2020, 11, 30),    // optional
    selectedDate: new Date(),           // optional
    disabledDates: [                    // optional
        new Date(2020, 1, 26)
    ],
    format: function (dateObject) {
        return dateObject // Format your dateobject to a string here
    },
    onChange: function (dateObject, formatted) {
        // Handle on change event
    }           
});

Methos

Datepicker methods

// Open the datepicker
dp.open();  

// Close the datepicker
dp.close(); 

// Render the dates again, probably not needed.
dp.render(); 

// Set the min date using a js Date object.
dp.setMinDate(Date); 

// Get the min date
dp.getMinDate();

// Set the max date using a js Date object.
dp.setMaxDate(Date);    

// Get the max date
dp.getMaxDate();

 // Set the selected date using a js Date object.
dp.setSelectedDate(Date);  
dp.setSelectedDate(Date, false); // Pass through false to stop the onChange event from being triggered.  

// Get the selected date, it returns an object of a js Date and the formatted date.
dp.getSelectedDate();

// Set the disabled dates using an array of js Date objects.
dp.setDisabledDates(Dates[]);   

// Get disabled dates
dp.getDisabledDates();

// Set the format of the input field.
dp.setFormat(formatFunction);   

// Get the date format
dp.getFormat();

// Set the onChange event.
dp.setOnChange(callbackFunction);   

// Get the on change event
dp.getOnChange();

// Trigger the on change event manually
dp.triggerOnChange();