Installation
Multiple ways to add NASjs to your project.
NPM / Yarn
npm install nasjs
# or
yarn add nasjs
CDN (Recommended)
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nasjs@1.5.0/dist/nasjs.min.css">
<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/nasjs@1.5.0/dist/nasjs.min.js"></script>
GitHub Pages CDN
<link rel="stylesheet" href="https://naseemfasal.github.io/NASjs/dist/nasjs.min.css">
<script src="https://naseemfasal.github.io/NASjs/dist/nasjs.min.js"></script>
DatePicker jQuery UI Alternative
Modern, lightweight datepicker with advanced features like date ranges, disabled days, and API integration.
Basic DatePicker
Simple date selection with default settings.
Block Past Dates
Perfect for booking systems - only future dates available.
Block Future Dates
For historical data - only past dates available.
Next 30 Days Only
Date range using relative dates (+0 to +30).
Weekdays Only
Block weekends - perfect for business day selection.
Block Holidays
Disable specific dates like holidays.
// Basic usage
NASjs.datePicker({ selector: '.my-datepicker' });
// Block past dates
NASjs.datePicker({ selector: '.booking', blockPastDates: true });
// Date range
NASjs.datePicker({ selector: '.range', minDate: '+0', maxDate: '+30' });
// Weekdays only
NASjs.datePicker({ selector: '.weekdays', disabledDaysOfWeek: [0, 6] });
// Disable specific dates
NASjs.datePicker({
selector: '.holidays',
disabledDates: ['2024-12-25', '2025-01-01']
});
DatePicker Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| selector | string | '.datepicker-input' | CSS selector for inputs |
| format | string | 'YYYY-MM-DD' | Date format |
| minDate | string/Date | null | Min date: '2024-01-01', '+0', '-30' |
| maxDate | string/Date | null | Max date: '2024-12-31', '+365' |
| blockPastDates | boolean | false | Block dates before today |
| blockFutureDates | boolean | false | Block dates after today |
| disabledDates | array | [] | Array of dates to disable |
| disabledDaysOfWeek | array | [] | Days to disable [0-6] |
| availableDates | array | null | Only these dates selectable |
| onSelect | function | null | Callback: (date, input) => {} |
TimePicker
Simple, elegant time selection with customizable intervals and formats.
12-Hour Format
30-minute intervals with AM/PM.
24-Hour Format
1-hour intervals in 24-hour format.
15-Minute Intervals
More precise time selection.
NASjs.timePicker({
selector: '.timepicker',
format: '12', // '12' or '24'
interval: 30, // 15, 30, 60, 120
onSelect: (time, input) => console.log(time)
});
Searchable Dropdown NEW
Powerful dropdown with search, remote JSON, add button, rich templates, and full RTL/Arabic support.
Basic Dropdown
Rich Template (with Status)
With Add Button
Arabic / RTL Support
// Basic dropdown
NASjs.dropdown({
selector: '#basic-dropdown',
placeholder: 'Select a country...',
data: [
{ id: 1, name: 'United States' },
{ id: 2, name: 'United Kingdom' }
]
});
// Rich template with status
NASjs.dropdown({
selector: '#rich-dropdown',
template: 'rich',
titleKey: 'name',
subtitleKey: 'role',
statusKey: 'status',
data: [{ id: 1, name: 'John', role: 'Developer', status: 'Active' }]
});
// With add button
let dropdown = NASjs.dropdown({
selector: '#add-dropdown',
addButton: true,
addButtonLabel: 'Add Customer',
onAddClick: (instance) => {
NASjs.popup({
title: 'Add Customer',
content: '<input id="name" placeholder="Name">',
onConfirm: () => {
instance.addItem({ id: Date.now(), name: document.getElementById('name').value }, true);
}
});
}
});
// Remote JSON (API)
NASjs.dropdown({
selector: '#api-dropdown',
remoteUrl: '/api/users',
remoteSearchParam: 'search',
remoteDataKey: 'data'
});
Event Calendar NEW
Full-featured calendar with events, popups, and API integration. Click on events to see details!
// Basic usage with events
NASjs.eventCalendar({
selector: '#calendar-demo',
events: [
{ id: 1, title: 'Team Meeting', date: '2024-12-15', color: '#3b82f6' },
{ id: 2, title: 'Launch Day', date: '2024-12-20', color: '#10b981' }
],
onEventClick: (event) => console.log(event)
});
// Load from API
NASjs.eventCalendar({
selector: '#calendar',
eventsUrl: '/api/events'
});
API JSON Format:
{ "events": [{ "id": 1, "title": "Meeting", "date": "2024-12-15", "description": "...", "color": "#3b82f6" }] }
Calendar Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| selector | string | '#calendar' | Container selector |
| events | array | [] | Array of event objects |
| eventsUrl | string | null | API URL to fetch events |
| onEventClick | function | null | Event click callback |
| onDateClick | function | null | Date click callback |
| popupFields | array | null | Custom popup fields |
| renderEventPopup | function | null | Custom popup renderer |
Image Gallery NEW
Modern lightbox gallery with thumbnails, zoom, and keyboard navigation. Click any image below!
<!-- HTML -->
<img src="thumb.jpg"
data-nasjs-gallery
data-gallery="my-gallery"
data-image-url="full-size.jpg"
data-title="Image Title"
data-description="Image description">
// Initialize
NASjs.imageGallery({
enableZoom: true,
showThumbnails: true,
enableKeyboard: true
});
Gallery Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
| selector | string | '[data-nasjs-gallery]' | Image selector |
| enableZoom | boolean | true | Enable zoom on click |
| zoomLevel | number | 2 | Zoom magnification |
| showThumbnails | boolean | true | Show thumbnail strip |
| showCounter | boolean | true | Show image counter |
| enableKeyboard | boolean | true | Arrow key navigation |
Modal
Customizable modal dialogs with animations and multiple buttons.
const modal = NASjs.modal({
title: 'Welcome!',
content: '<p>Modal content here.</p>',
buttons: [
{ text: 'Cancel', class: 'nasjs-modal-btn-secondary' },
{ text: 'Confirm', class: 'nasjs-modal-btn-primary', onClick: () => alert('Confirmed!') }
],
closeOnBackdrop: true,
closeOnEscape: true
});
// Close programmatically
modal.close();
Confirm Dialog SweetAlert Alternative
Beautiful confirmation dialogs - a lightweight alternative to SweetAlert.
NASjs.confirm({
title: 'Delete Item?',
message: 'This action cannot be undone.',
confirmText: 'Yes, Delete',
cancelText: 'Cancel',
onConfirm: () => {
console.log('Item deleted');
},
onCancel: () => {
console.log('Cancelled');
}
});
Live Clock
Real-time clock display with customizable format.
Live Clock Demo
const clock = NASjs.liveClock('#clock', {
format: '12', // '12' or '24'
showSeconds: true,
showDate: true
});
// Control
clock.stop();
clock.start();