4.0.2 • Published 12 months ago

nh-picker v4.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
12 months ago

Date And Time Picker—Documentation

nh-picker is a javascript package that provides a simple and customizable date and time picker component for web applications. It allows users to select a date and time from a calendar interface, or to enter them manually. nh-picker supports various formats. nh-picker is lightweight, responsive, and accessible, and can be used for any kind of date and time input needs.

Installation

NPM install

npm i nh-picker

CDN

<!-- css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nh-picker/style/nh-picker.min.css">
<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/nh-picker/js/picker.min.js"></script>

Basic use

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Picker</title>
    <link rel="stylesheet" href="src/nh-picker.min.css">
</head>
<body>

<!-- To use date picker, you can use input type 'text' or 'date' -->
<input type="text" class="picker" name="birthday">
<!-- or -->
<input type="date" class="picker" name="birthday">

<script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="src/picker.min.js"></script>
<script>
    $(function () {
        $('.picker').picker();
    });
</script>
</body>

To change html default date format, you can use...

<!-- default value 'yyyy-MM-dd' -->
<input type="date" class="picker" data-nh-date-format="dd-mm-yyyy" name="birthday">

or

$('.picker').picker({
    dateFormat: 'dd-mm-yyyy' // default value 'yyyy-MM-dd'
});

If you want to add minimum date and maximum date you can use...

<!-- default value 'null' -->
<input type="date" class="picker" data-nh-min-date="5/7/2022"
       data-nh-max-date="20/6/2024" name="birthday">

or

$('.picker').picker({
    minDate: '5/2/2023', // default value 'null'
    maxDate: '25/8/2024', // default value 'null'
});

Note: The minimum date and maximum date values will be the same format as your modified format.

To select the dateline, you can use...

<!-- This value will be 'true' or 'false' -->
<!-- default value 'false' -->
<input type="date" class="picker" data-nh-date-range="false" name="birthday">

or

$('.picker').picker({
    dateRange: true, // default value 'false'
});

To show today button, you can use...

<!-- This value will be 'true' or 'false' -->
<!-- default value 'true' -->
<input type="date" class="picker" data-nh-today="true" name="birthday">

or

$('.picker').picker({
    today: true, // default value 'true'
});

To show clear button, you can use...

<!-- This value will be 'true' or 'false' -->
<!-- default value 'true' -->
<input type="date" class="picker" data-nh-clear="true" name="birthday">

or

$('.picker').picker({
    clear: true, // default value 'true'
});

Time picker

To use Time Picker

<!-- To enable the time picker you need to set the input type to 'time' -->
<input type="time" class="picker">

<!-- To change time format you need to set data-nh-time-format.This value will be '12' or '24' -->
<!-- default value 12 -->
<input type="time" class="picker" data-nh-time-format="12">

or

$('.picker').picker({
    timeFormat: 12 // default value 12
});

Month picker

You can use Month Picker` if you want to select month only `

<!-- default value false -->
<input type="time" class="picker" data-nh-month-select="true">

or

$('.picker').picker({
    monthSelection: true // default value false
});

Year picker

You can use Year Picker` if you want to select Year only `

<!-- default value false -->
<input type="time" class="picker" data-nh-year-select="true">

or

$('.picker').picker({
    yearSelection: true // default value false
});

Picker Colour Theme

Only dark and light themes are available here. If you want to change the colour theme, you need to add a attribute Its name is data-nh-picker-theme. The value of the attribute will be dark, light or auto. Like...

<!-- default value auto -->
<input type="time" class="picker" data-nh-picker-theme="dark">

or

$('.picker').picker({
    theme: 'dark' // default value auto
});
3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

4.0.1

12 months ago

4.0.0

12 months ago

4.0.2

12 months ago

2.0.2

1 year ago

2.0.1

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

2.0.0

1 year ago

1.0.3

1 year ago

1.0.0

1 year ago