jb-date-input

!GitHub Created At

Pure js Jalali Date Picker Web-Component

web component date input (picker) to get date (jalali & gregorian) from user.

- support jalali date as well as gregorian date.

- support keyboard arrow key and fast date input with keyboard.

- 💅customizable style with css variables.

- can set min and max date value.

- web component so it can be used in every framework and even pure-js project.

- responsive and mobile friendly (support swipe in touch devices and handle virtual keyboard).

- support typescript.

- good typing experience for desktop user.

- has headless module so you can use it with any input read more.

- have 3 value type so you can get inputted value in gregorian, jalali or timestamp base on your project need.

- customizable value format so you can get your value in standard iso format or custom format like 1400/12/08 or 1400_12_08.

- support esm import build for modern ECMA Script nodejs app.

- compatible with native HTML form element to send data to server.

- support multi-language and i18n see jb design system getting starting guidance.

Demo & Sample:

- github pages
- codepen
- storybook

using with JS frameworks

-

instructions

$3

#### using npm

1- install package:

``sh
npm i jb-date-input
`

2- import package in one of your .js file:

`js
import 'jb-date-input';
`

3- use it in your .html file like any other tag:

`HTML

`
#### using cdn

1- First, add script tag to your html file and then use web component how ever you need.


`HTML

`
> we recommend you to use UMD build of the component when you using CDN but you can also use compressed and ESM module too. for more information see package structure

2- use it in your .html file like any other tag:

`HTML

`

min and max date limit

you can set minimum date and maximum date range for your date input in 2 way:

1- by html attribute in string format of your value

`html


`
2- by call setMinDate and setMaxDate function and providing string or Date format:

`javascript
const today = new Date();
document.querySelector('jb-date-input').setMinDate(today)
const max = new Date('2022-08-15T08:51:23.176Z');
document.querySelector('jb-date-input').setMaxDate(max);
// or string
document.querySelector('jb-date-input').setMinDate('2022-08-15T08:51:23.176Z');
`

placeholder

you can set placeholder to show it to user when input is empty. to doing so just set placeholder attribute in HTML DOM or placeholder in JavaScript:

`html


`
`js
document.querySelector('jb-date-input').placeholder = Enter Date Here;
`

custom validation

beside of min and max you can also set your own custom validation like any other jb web components family to achieve this you must create a array of validations and assign them to component

`js
const validationList = [
{
validator:/^13.*$/g,
message:'date must be in 13 century'
},
{
validator:({text, inputObject, valueObject, valueText})=>{
//you can use raw imputed text or formatted text in expected value in arguments
//you have access to both jalali and gregorian date object here in valueObject
//inputObject is a object contain imputed day & month & year unprocessed base on format so it have value before date imputed completely
// remember valueObject and valueText are both empty and null when date is incomplete
//if you want to validate incomplete date you can use inputText
return valueObject.jalali.day == 15;
},
message:'you can only choose 15th day of month'
}
];
document.querySelector('jb-date-input').validation.list = validationList
`


remember your min and max date must be in the same format and valueType of your value.
to trigger validation and check is the element has a valid value:

`js
// if show error was false, in case of error component dont show error itself and function will return if data valid or not
const showError = true
const validationObj = dom.validation.checkValidity({showError})
`

events

`js
//when default property are defined best time for impl your config like min and max date
document.querySelector('jb-date-input').addEventListener('init',this.onCalendarElementInitiated);

//when calendar init all property and function and dom created and bind successfully
document.querySelector('jb-date-input').addEventListener('load',this.onCalendarElementLoaded);
document.querySelector('jb-date-input').addEventListener('change',(e)=>{
//value in string
console.log(e.target.value)
//value in js Date object
console.log(e.target.valueInDate)
});
`

Input Type

See Here

set default date for calendar when opened

when date input value is empty we show today year and month in opened calendar by default but you can change it to another date. for example you want user fill they birthdate you can set it to 20 years ago so user can pick his/her birthday easier and faster. to doing so all you have to do is to use setCalendarDefaultDateViewfunction like this:

`javascript
const year = 1360
const month = 5
//just set year and month for current input-type date type
document.querySelector('jb-date-input').setCalendarDefaultDateView(year,month);
//set default year and month for gregorian input-type
document.querySelector('jb-date-input').setCalendarDefaultDateView(year,month,'GREGORIAN');
//set default year and month for jalali input-type
document.querySelector('jb-date-input').setCalendarDefaultDateView(year,month,'JALALI');
`

show persian number

if you want to show persian number instead of English number char you just have to set show-persian-number attribute like this:
`javascript

//or

`

Value Type

See Value Type for explanation and code

Slots

See Slots for demo and code in React

$3

in jb-input you can put icon or any other custom html DOM in input box. to doing so you just have to place custom DOM in jb-date-input tag and add slot="start-section" or slot="end-section" to place it before or after input field.
example:

`HTML

after

before

`

$3

you can change calendar icon base on your own need to doing so you just have to put your custom html inside web component with slot="calendar-trigger-icon" like below:

`html

`

format

See Value Doc

Change Month List

you may want to change the default month list for both of Jalali and Gregorian calendars base on your country month labels. here how you can do it:
`js
document.querySelector('jb-date-input').setMonthList('JALALI',['حَمَل','ثَور','جَوزا','سَرَطان','اَسَد','سُنبُله','میزان','عَقرَب','قَوس','جَدْی','دَلو','حوت']);
document.querySelector('jb-date-input').setMonthList('GREGORIAN',['1','2','3','4','5','6','7','8','9','10','11','12']);
`

overflow handler

sometimes you place date input inside modal or end of the pages so when user open the input picker it overflow the page and some part of picker will be invisible.
to fix this we add a feature called overflowHandler by set this to SLIDE the picker will move, on mouse enter it's territory so user can easily pick date
`js
document.querySelector('jb-date-input').elements.popover.overflowHandler = "SLIDE"
`

set custom style

in some cases in your project you need to change default style of web-component for example you need zero margin or different border-radius and etc.
if you want to set a custom style to this web-component all you need is to set css variable in parent scope of web-component.
#### usage example:

`css
body{
/ if you need more margin /
--jb-date-input-margin: 16px 32px;
/ if you dont want rounded corner /
--jb-input-border-radius:0px;
/ if you want different text color/
--jb-input-value-color:red;
}
`

you can customize jb-date-input look by setting css variable in your app.
jb-date-input use jb-input and jb-calendar and jb-popover underneath so to change the styles of your component read custom style section of these components and set their css variable.
more than above here is the css variable that we use in jb-date-input itself:

#### variable list

| css variable name | description |
| ------------- | ------------- |
| --jb-date-input-margin | web-component margin default is 0 0 |
| --jb-date-input-calendar-trigger-display | set it no none to hide calendar icon |
| --jb-date-input-calendar-trigger-width | set calendar icon width |
| --jb-date-input-calendar-trigger-height | set calendar icon height |
| --jb-date-input-calendar-icon-color | calendar icon color |
| --jb-date-input-calendar-icon-color-active | calendar icon color when calendar is open |

Headless usage:

you can use jb-date-input headless functions to bring jb-date-input features to your own component.
for doing so you just have to import some utils function and bind your input events and use them:
See Sample and Implement Document Here

Other Related Docs:

- see jb-date-input/react`; if you want to use this component in react

- see All JB Design system Component List for more components

- use Contribution Guide if you want to contribute in this component.