dinaank
v1.0.99
Published
A minimal date-picker library that just works.
Downloads
29
Maintainers
Readme
dinaank
Select a date with JavaScript, but that's not the only thing you can do with it. Dinaank has no dependencies and weighs in at 4.9kb gzipped! Dinaank is simple to use and looks clean and minimal. A calendar pops up and you pick a date. That's it.
Installation
Manually
Simply include dinaank.js cdn url in the head
<script src="dinaank.js"></script>
<!-- Or remotely via Unpkg CDN -->
<script src="https://unpkg.com/dinaank"></script>
If you have downloaded the package via zip file from Github, these files are located in the dist folder. Otherwise, you can use the Unpkg CDN as shown in the examples above.
Via npm/yarn
# using npn
npm install dinaank
# using yarn
yarn add dinaank
Basic Usage
Importing the library if you're using it in Node:
const dinaank = require("dinaank");
Using in code
/*
* Selector can only be inform of class name without '.' or '#'
* options is object of options see options section for more information.
*/
new dinaank.dateSelector({
el: selector,
options,
});
Options - Event Callbacks
Use these options if you want to fire off your own functions after something happens with the calendar.
onChange
Callback function after a date is selected or changed by the user. It has one argument and that is date use it the way you like it.
const picker = new dinaank.dateSelector({
el: "_date_picker",
onChange: (date) => {
// do stuff with the selected date on the calender
},
});
Options - customization
Colors/Mode Define calender colors and mode.
Custom color
const picker = new dinaank.dateSelector({
el: "_date_picker",
theme: "dark", // default theme is dark. Use dark or light
colors: {
hover: "cyan", // default colors dark: #2c437a , light: #ffab91
active: "blue", // default colors dark: #1f5eff , light: #f4511e
},
});
startYear, endYear You can customize the list of years start year, not only start year you can also customize the list end year. See example below.
const picker = new dinaank.dateSelector({
el: "_date_picker",
startYear: 1992, // default currentYear - 80
endYear: 2045, // default currentYear + 40
});
Events An range of dates which indicate something is happening - a meeting, birthday, etc. I.e. an event.
const picker = new dinaank.dateSelector({
el: "_date_picker",
events: {
start: new Date(2020, 10, 1),
end: new Date(2021, 1, 1),
}, // defaults to null
});
Date Selected
This will start the calender with a date already selected.
const picker = new dinaank.dateSelector({
el: "_date_picker",
_day_selected: new Date(2099, 10, 1),
// defaults to new Date() i.e. today's date
});
minDate
This will be the minumum threshold of selectable dates. Anything prior will be unselectable.
const picker = new dinaank.dateSelector({
el: "_date_picker",
minDate: new Date(2099, 10, 1), // defaults to null
});
maxDate
This will be the maximum threshold of selectable dates. Anything after it will be unselectable.
const picker = new dinaank.dateSelector({
el: "_date_picker",
maxDate: new Date(2099, 10, 1), // defaults to null
});
minDate and maxDate can also be used together
const picker = new dinaank.dateSelector({
el: "_date_picker",
minDate: new Date(2021, 10, 1), // defaults to null
maxDate: new Date(2099, 10, 1), // defaults to null
});
months
You can customize the display of the months name at the top of the calender widget by providing an array of 12 strings in the order written below:
const picker = new dinaank.dateSelector({
months: [
"😀",
"😂",
"😎",
"😍",
"🤩",
"😜",
"😬",
"😳",
"🤪",
"🤓 ",
"😝",
"😮",
],
// default [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
});
week days
You can customize the display of the week days at the top of the calender widget by providing an array of 7 strings in the order written below:
const picker = new dinaank.dateSelector({
weekdays: ["😌", "🥶", "😌", "😐", "😝", "🤧", "😍"],
// default ["Su","Mo","Tu","We","Th","Fr","Sa"]
});
readOnlySelector
This will make input selector readonly means user won't be able to type anything thus preventing invalid dates entered by user.
const picker = new dinaank.dateSelector({
el: "_date_picker",
readOnlySelector: false, // defaults to true
});
date range selection
You can also use our date range picker calender. It's simple to implement just pass canSelectRange as true in options while calling the constructor.
const picker = new dinaank.dateSelector({
el: "_date_picker_",
canSelectRange: true, // defaults to false
onChange: (date, rangeSelected) => {
// here date will be new Date()
// rangeSelected is a object with start and end dates selected by user
/**
* { start: new Date(), end: new Date() }
*/
console.log(rangeSelected);
},
});
closeOnSelect
Calender widget/popup closes by default on date select you can disable this feature by passing a closeOnSelect: false
with options.
const picker = new dinaank.dateSelector({
el: "_date_picker_",
closeOnSelect: false, // defaults to true
});
MIT License
Copyright (c) 2021 Harsh Vardhan Goswami
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.