j-picker v1.0.1

JPicker

Simply date picker for web applications

Features

• Choosing one day or range of days
• Choosing predefined range (or set your own ranges)
• Easy setup
• No dependencies
• Inline mode

Getting started

Installation

You can use npm npm install j-picker or just download bundle files for bundle dir

Usages

1. Add css file to your page

<link href="bundle/JPicker.css" rel="stylesheet">

2. Add JS

<script src="bundle/Jpicker.js"></script>
<script>window.JPicker //<-- JPicker will be available under global varaiable</script>

OR

require(['bundle/JPicker.js'], function(JPicker) {});

OR

import JPicker form 'j-picker';

OR

const JPicker = require('j-picker');

3. Create instance of JPicker with config

const jpicker = new JPicker({
    wrapper: '.selector-for-picker'
})

Getting current value

const picker = new JPicker({
    wrapper: '.date-picker-wrapper'
});

const value = picker.getCurrentValue();//returns Array<Date>

Setting new value

//for range
const value = picker.setCurrentValue([new Date(2020, 01, 8), new Date(2020, 01, 12)])
//for single
const value = picker.setCurrentValue([new Date(2020, 01, 8)])

Configuration

Object with configuration should be passed to JPicker constructor.

Events

In configuration object with events can be passed. In example below all possible events are shown:

const picker = new JPicker({
    wrapper: '.date-picker-wrapper',
    events: {
        onChangeValue: function(currentValue: Array<Date>) {
            //called when value of datepicker was changed 
        },
        onNextMonthClick: function() {
            //called when user click next month arrow
        },
        onPrevMonthClick: function() {
            //called when user click previous month arrow
        },
        onDayClick: function(day: number, date: Array<number>) {
            //called when user choose specific day
        },
        onDayMouseEnter: function(day: number, date: Array<number>) {
            //called when user enter pointer on specific day
        },
        onDayMouseLeave: function(day: number, date: Array<number>) {
            //called when user leave pointer from specific day
        },
        onRangeClick: function(FromDate: Date, ToDate: Date) {
            //called when choose range
        },
        onValueClick: function(ValueDate: Date) {
            //called when user click value that is shown in picker header
        },
        onMenuMonthClick: function() {
            //called when user click month name and menu with month will be opened
        },
        onMonthClick: function(month: number) {
            //called when user choose specific month
        }
    }
});

Ranges

JPicker has defined date ranges that can choose by user, e.g. last 7 days. Defaults ranges:

• this_week (displayed name This week)
• last_week (displayed name Last week)
• next_week (displayed name next week)
• last_3_days (displayed name Last 3 days)
• last_7_days (displayed name Last 7 days)
• last_30_days (displayed name Last 30 days)
• this_month (displayed name This month)
• last_month (displayed name Last month)
• next_month (displayed name Next month)
• this_quarter (displayed name This quarter)
• last_quarter (displayed name Last quarter)
• next_quarter (displayed name Next quarter)

Displayed names can be changed in configuration, example below:

const picker = new JPicker({
    wrapper: '.date-picker-wrapper',
    rangesLabels: {
        this_week: "Current week",
        last_week: "Previous week"
        //etc
    }
});

Instead of predefined ranges, own ones can be setup (or use predefined if only some of all should be displayed), example below:

const picker = new JPicker({
    wrapper: '.date-picker-wrapper',
    rangesSet: [
        'this_week',
        'this_month',
        {
            id: "this_year",
            label: "This year",
            range: [new Date(2022, 0, 1), new Date(2022, 11, 31)]
        }
    ]
});