Gathering detailed insights and metrics for react-advance-jalaali-datepicker-dialog-friendly
Gathering detailed insights and metrics for react-advance-jalaali-datepicker-dialog-friendly
Installations
npm install react-advance-jalaali-datepicker-dialog-friendlyReleases
20
Contributors
2
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4){kind=avatar}
Developer
A-Kasaaian
Developer Guide
BETA
Module System
Unable to determine the module system for this package.
Min. Node Version
Typescript Support
No
Node Version
10.16.3
NPM Version
6.9.0
Statistics
88 Stars
49 Commits
17 Forks
2 Watching
1 Branches
2 Contributors
Updated on 24 Nov 2024
Bundle Size
346.39 kB
Minified
85.64 kB
Minified + Gzipped
Languages
JavaScript (100%)
Total Downloads
Cumulative downloads
Total Downloads
2,717
Last day
0%
1
Compared to previous day
Last week
-52.4%
10
Compared to previous week
Last month
500%
42
Compared to previous month
Last year
-1.2%
336
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
4
Versions
Advance React Date and Time Picker for jalaali (persian, shamsi) calender
It contains 3 types of jalaali (persian) date pickers, which are date and time range (from, to) picker, date range picker, date picker, and date and time picker.
این ماژول شامل ۴ نوع مختلف از باکس انتخاب تاریخ و زمان جلالی (شمسی) است. انواع باکس های انتخاب تاریخ و زمان (پیاده سازی شده تا کنون) عبارتند از: بازه تاریخ و زمان (از، تا)، بازه تاریخ (از، تا)، انتخاب تاریخ و انتخاب تاریخ زمان.
This module is written using moment-jalali, which is relied on momentjs.
Instalation
Use npm i react-advance-jalaali-datepicker in order to install the module. Yes that's it. There is no extra font or css file to include. It's designed simple to prevent any issue during customization. Customize it in the way you need.
Usage
In order to use this module, import the package into your react component and use the module as below. The below example is the code that is used in the sample usage video.
1import React from "react"; 2import { 3 DatePicker, 4 DateTimePicker, 5 DateRangePicker, 6 DateTimeRangePicker 7} from "react-advance-jalaali-datepicker"; 8export class Home extends React.component { 9 change(unix, formatted) { 10 console.log(unix); // returns timestamp of the selected value, for example. 11 console.log(formatted); // returns the selected value in the format you've entered, forexample, "تاریخ: 1396/02/24 ساعت: 18:30". 12 } 13 DatePickerInput(props) { 14 return <input className="popo" {...props} />; 15 } 16 render() { 17 return ( 18 <div className="datePicker"> 19 <DatePicker 20 inputComponent={this.DatePickerInput} 21 placeholder="انتخاب تاریخ" 22 format="jYYYY/jMM/jDD" 23 onChange={this.change} 24 id="datePicker" 25 preSelected="1396/05/15" 26 /> 27 <DateTimePicker 28 placeholder="انتخاب تاریخ و ساعت" 29 format="تاریخ: jYYYY/jMM/jDD ساعت: HH:mm" 30 id="dateTimePicker" 31 onChange={this.changeTimeDate} 32 preSelected="تاریخ: 1396/02/24 ساعت: 18:30" 33 /> 34 <DateRangePicker 35 placeholderStart="تاریخ شروع" 36 placeholderEnd="تاریخ پایان" 37 format="jYYYY/jMM/jDD" 38 onChangeStart={this.change} 39 onChangeEnd={this.changeTimeDate} 40 idStart="rangePickerStart" 41 idEnd="rangePickerEnd" 42 /> 43 <DateTimeRangePicker 44 placeholderStart="تاریخ و ساعت شروع" 45 placeholderEnd="تاریخ و ساعت پایان" 46 format="تاریخ: jYYYY/jMM/jDD ساعت: HH:mm" 47 onChangeStart={this.change} 48 onChangeEnd={this.changeTimeDate} 49 idStart="rangePickerStart" 50 idEnd="rangePickerEnd" 51 /> 52 </div> 53 ); 54 } 55}
component types:
| name | Description |
|---|---|
| DatePicker | shows a box allowing you pick just a date |
| DateTimePicker | shows a box allowing you pick just a date and time |
| DateRangePicker | shows a box twice, allowing you pick two dates. The first box allows you to pick the beginnig date and second one lets you pick end date |
| DateTimeRangePicker | shows a box twice, allowing you pick two dates and time. The first box allows you to pick the beginnig date and time and second one lets you pick end date and time |
Options
Each type has its' own options.
"DatePicker" and "DateTimePicker":
| Name | type | Description |
|---|---|---|
| placeholder | string | Placeholder of the datepicker input |
| format | string | Format of showing date in the input and styled output. Accepts moment-jalali formats (required) |
| onChange | function | On change call of the input (required) |
| id | string | Adds id attribute to the input elment |
| preSelected | string | Previously selected date, it should be formatted exactly the same as the format option |
| customClass | string | To add "className" to the datepicker |
| inputTextAlign | string | Text align of the date input. default "right" |
| containerClass | string | To add "className" to the datepicker input container |
| monthTitleEnable | boolean | To add a title before month controller row |
| inputComponent | JSX element | To add customized input field to your datepicker |
| cancelOnBackgroundClick | boolean | To add background, which closes the datepicker on click event. It's customizable with class name "JDBackground" |
| controlValue | boolean | By setting to true, It will make preselected value control the input value |
| newThemeColor | string | Set the new theme colorto render new theme with the provided color. Otherwise, render the default simple theme and customize it yourself |
DateRangePicker:
| Name | type | Description |
|---|---|---|
| placeholderStart, placeholderEnd | string | Placeholder of the datepickers inputs |
| format | string | Format of showing date in the input. Applies on both inputs. Accepts moment-jalali formats (required) |
| onChangeStart, onChangeEnd | function | On change call of inputs (required) |
| idStart, idEnd | string | Add id attributes to the input elments |
| customClassStart, customClassEnd | string | To add class name to start and end dattepickers |
| inputTextAlign | string | Text align of the date input. default "right" |
| containerClass | string | To add "className" to the datepicker input container |
| monthTitleEnable | boolean | to add a title before month controller row |
| inputComponent | JSX element | To add customized input field to your datepicker |
| preSelectedStart | string | Previously selected date, it should be formatted exactly the same as the format option |
| cancelOnBackgroundClick | boolean | To add background, which closes the datepicker on click event. It's customizable with class name "JDBackground" |
| controlValue | boolean | By setting to true, It will make preselected value control the input value |
| renderPointer | boolean | Shows the pointer to the end of range, if enabled. default: true |
| pointer | JSX element | Renders the passed pointer element instead of the default one |
| newThemeColor | string | Set the new theme colorto render new theme with the provided color. Otherwise, render the default simple theme and customize it yourself |
Current date
You can use current-date class to style today. In the calendar you can find today has additional class of current-date.
Outside control sample
here you can find an example of code to control input from your parent component. This example shows how to reset values by a button.
Highlight specific date
Add format of the date. Add preSelected date with the mentioned format. The day will get "selected" class. Today is containing "current-date" class name.
More
More features will be provided.
I'll be glad to help if you faced any issue. Please, report issues here.
License
MIT
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/23 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 12 are checked with a SAST tool
Score
3.5
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More