### Install JalaliDatePicker via NPM Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Install the @majidh1/jalalidatepicker package from npm package registry. This is the recommended method for modern JavaScript projects using module bundlers like webpack or rollup. ```bash npm install @majidh1/jalalidatepicker ``` -------------------------------- ### Install JalaliDatePicker via npm Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Install the JalaliDatePicker package from npm registry using the npm package manager. This is the recommended installation method for projects using Node.js and npm. ```shell npm i @majidh1/jalalidatepicker ``` -------------------------------- ### Import JalaliDatePicker with CommonJS Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Import JalaliDatePicker using CommonJS require syntax for Node.js and CommonJS-compatible environments. Initialize the datepicker after requiring the module with desired configuration options. ```javascript require('@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css'); const jalaliDatepicker = require('@majidh1/jalalidatepicker'); jalaliDatepicker.startWatch({ date: true, time: false }); ``` -------------------------------- ### Basic Initialization with Auto Detection - JavaScript Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Initializes the JalaliDatePicker to automatically attach to all input elements with the `data-jdp` attribute. This requires including the library's CSS and JavaScript files via CDN. ```html ``` -------------------------------- ### Update DatePicker Options After Initialization Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Dynamically modify datepicker configuration after setup using updateOptions() method without reinitializing the entire component. Enables toggling time selection and other options based on user interactions. Requires the datepicker to be initialized with startWatch() first. ```html ``` -------------------------------- ### Include JalaliDatePicker from UNPKG CDN Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Load JalaliDatePicker CSS and JavaScript files directly from the UNPKG content delivery network. This method requires no local installation and provides the latest version. ```html ``` -------------------------------- ### Dynamic Linked Date Pickers for Date Range Selection Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Create linked date pickers where the start date picker controls the minimum selectable date for the end date picker. This is ideal for implementing date range selection functionality. The `data-jdp-min-date` attribute on the end date input links it to the start date input. Event listeners can capture changes to log the selected range. ```html ``` -------------------------------- ### Angular.json Configuration for JalaliDatePicker Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Configuration snippet for `angular.json` to include JalaliDatePicker's CSS and JavaScript files. This ensures the datepicker's styles are applied and its functionality is available throughout the Angular application. ```json { "styles": [ "node_modules/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css" ], "scripts": [ "node_modules/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js" ] } ``` -------------------------------- ### Angular Component for JalaliDatePicker Source: https://context7.com/majidh1/jalalidatepicker/llms.txt An Angular component demonstrating the integration of JalaliDatePicker. It uses `@ViewChild` to get a reference to the input element and `AfterViewInit` to initialize the datepicker. The `OnDestroy` hook is used to hide the picker when the component is removed. It listens for the `jdp:change` event for user selections. ```typescript import { Component, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core'; declare var jalaliDatepicker: any; @Component({ selector: 'app-date-picker', template: ` `, styleUrls: ['./date-picker.component.css'] }) export class DatePickerComponent implements AfterViewInit, OnDestroy { @ViewChild('dateInput') dateInput!: ElementRef; ngAfterViewInit() { jalaliDatepicker.startWatch({ date: true, time: true, persianDigits: true }); } onDateChange(event: any) { console.log('Date selected:', event.target.value); } ngOnDestroy() { jalaliDatepicker.hide(); } } ``` -------------------------------- ### Import JalaliDatePicker with ES6 Modules Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Import JalaliDatePicker CSS and JavaScript assets using ES6 module syntax and initialize the datepicker on DOM content loaded. Suitable for modern bundled JavaScript applications with support for ES6 module syntax. ```javascript import '@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css'; import '@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js'; document.addEventListener('DOMContentLoaded', function() { window.jalaliDatepicker.startWatch({ date: true, time: true, persianDigits: true }); }); ``` -------------------------------- ### Time-Only Picker with Min/Max Range - JavaScript Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Sets up a time-only JalaliDatePicker with minimum and maximum time constraints read from data attributes. It specifies that the picker should only handle time selection and includes a default initial time. ```html ``` -------------------------------- ### Manual Datepicker Display - JavaScript Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Manually displays the JalaliDatePicker on a specific input element and provides an example of programmatically hiding it after a delay. This method allows for more control over when the datepicker appears. ```html ``` -------------------------------- ### Date and Time Selection Configuration - JavaScript Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Configures the JalaliDatePicker to enable both date and time selection, with options for including seconds, keeping the picker open after selection, and showing 'Today' and 'Clear' buttons. It also includes an event listener for date changes. ```html ``` -------------------------------- ### Integrate JalaliDatePicker in Vue.js Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Integrate JalaliDatePicker into Vue.js components using mounted lifecycle hook for initialization and beforeUnmount for cleanup. Handles change events and proper lifecycle management for Vue 3 composition. ```vue ``` -------------------------------- ### Custom Month and Day Names for Jalali Datepicker Localization Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Customize the displayed names for months and days of the week to support different languages or terminology preferences. The `months` array should contain 12 month names, and the `days` array should contain 7 day names, typically starting from Saturday. `changeMonthRotateYear` can auto-increment/decrement the year when navigating month boundaries. ```html ``` -------------------------------- ### Custom Day Rendering with Holiday Marking in Jalali Datepicker Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Implement custom logic to render individual days, allowing for visual cues like marking holidays, weekends, or special events. The `dayRendering` function can return an object to specify if a day is a holiday (`isHollyDay`), if it's a valid selection (`isValid`), and apply custom CSS classes (`className`). This example marks Nowruz holidays and Fridays, and disables past dates. ```html ``` -------------------------------- ### Start automatic JalaliDatePicker detection with JavaScript Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Initialize automatic JalaliDatePicker detection using the startWatch() method. This function scans the DOM for elements with the data-jdp attribute and enables date picker functionality on matching inputs. ```javascript jalaliDatepicker.startWatch(); ``` -------------------------------- ### Configure Mobile-Optimized DatePicker Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Set up mobile-friendly datepicker configuration with automatic readonly input on mobile devices to prevent keyboard interference, close button visibility, and conditional time selection button display. Improves user experience on touch devices. ```html ``` -------------------------------- ### Positioning and Z-Index Configuration for Jalali Datepicker Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Control the visual placement of the datepicker relative to its input field and manage its stacking order using `z-index`. Options like `zIndex`, `topSpace`, `bottomSpace`, `overflowSpace`, and `container` allow fine-tuning for various UI contexts, including modals or layered interfaces. ```html

``` -------------------------------- ### Date Range Restriction with Min/Max Dates - JavaScript Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Configures the JalaliDatePicker to restrict selectable dates using `data-jdp-min-date` and `data-jdp-max-date` attributes. It demonstrates using 'today' and a specific date, and also shows how to update these options programmatically. ```html ``` -------------------------------- ### Enable Year Dropdown Navigation Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Configure datepicker to display years as a dropdown menu instead of sequential navigation buttons, allowing faster access to dates far in the past or future. Set useDropDownYears option to true during initialization. ```html ``` -------------------------------- ### Integrate JalaliDatePicker in React Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Integrate JalaliDatePicker into React functional components using useEffect hook for initialization and event listener management. Handles proper cleanup in the return function to prevent memory leaks and duplicate event listeners. ```jsx import React, { useEffect, useRef } from 'react'; import '@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css'; import '@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js'; function DatePickerComponent() { const inputRef = useRef(null); useEffect(() => { window.jalaliDatepicker.startWatch({ date: true, time: true, persianDigits: true }); const handleChange = (e) => { console.log('Date changed:', e.target.value); }; if (inputRef.current) { inputRef.current.addEventListener('jdp:change', handleChange); } return () => { if (inputRef.current) { inputRef.current.removeEventListener('jdp:change', handleChange); } }; }, []); return (

); } export default DatePickerComponent; ``` -------------------------------- ### Set Initial Date for Jalali Datepicker Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Configure the datepicker to display a specific date upon initialization. This is useful for pre-filling forms or providing a default context. It can be set using a data attribute on the input or within the JavaScript configuration. ```html ``` -------------------------------- ### Use Persian Digits and Custom Separators in Jalali Datepicker Source: https://context7.com/majidh1/jalalidatepicker/llms.txt Enable the display of dates using Persian Unicode digits and define custom separator characters for dates and times. This enhances localization for Persian users. The `persianDigits` option activates Persian numerals, while `separatorChars` allows customization of date, time, and date-time separators. ```html ``` -------------------------------- ### Initialize Jalali Datepicker with Options Source: https://github.com/majidh1/jalalidatepicker/blob/main/test/index.html Configures the jalaliDatepicker with specific options for date and time selection. It supports attribute-based min/max date and time, enables date and time selection with seconds, and includes various UI customization options. The `dayRendering` function allows for custom styling of days, such as marking holidays. ```javascript jalaliDatepicker.startWatch({ minDate: "attr", maxDate: "attr", minTime: "attr", maxTime: "attr", time: true, date: true, hasSecond: true, hideAfterChange: false, autoHide: true, showTodayBtn: true, showEmptyBtn: true, topSpace: 10, bottomSpace: 30, overflowSpace: -10, dayRendering(opt, input) { return { isHollyDay: opt.day == 1, }; }, }); ``` -------------------------------- ### Automatic JalaliDatePicker initialization with data attribute Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Enable automatic date picker initialization by adding the data-jdp attribute to input elements and calling startWatch(). This method automatically detects all inputs with the attribute and applies the date picker functionality. ```html ``` -------------------------------- ### Clone JalaliDatePicker repository and move dist folder Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Manually clone the JalaliDatePicker GitHub repository and move the dist folder to your project directory. This method provides full control over the library files and is useful for custom modifications. ```shell git clone https://github.com/majidh1/JalaliDatePicker.git cd JalaliDatePicker/ mv dist/ /path/to/your/project ``` -------------------------------- ### Include JalaliDatePicker from jsDelivr CDN Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Load JalaliDatePicker CSS and JavaScript files from the jsDelivr content delivery network. This CDN provides fast global distribution and automatic version management with the @latest tag. ```html ``` -------------------------------- ### JalaliDatePicker global object methods Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Core methods available on the jalaliDatepicker global object after loading the library. These methods provide automatic detection, manual display, hiding, and option updates for date picker functionality. ```javascript jalaliDatepicker.startWatch(options: object); jalaliDatepicker.show(input: document); jalaliDatepicker.updateOptions(options: object); jalaliDatepicker.hide(); ``` -------------------------------- ### Include JalaliDatePicker CSS and JavaScript in HTML Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Add JalaliDatePicker stylesheet and script files to your HTML document. Include both CSS for styling and JavaScript for functionality. Can be sourced from local files or CDN. ```html ``` -------------------------------- ### Custom Day Rendering in Jalali Datepicker Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Demonstrates how to use the `dayRendering` option to customize the appearance and behavior of days within the Jalali Datepicker. This function allows for marking specific days as holidays or disabling them based on custom logic. It takes day options and the input element as arguments and returns an object to control day properties. ```javascript jalaliDatepicker.startWatch({ dayRendering: (dayOptions, input) => { return { isHollyDay: dayOptions.month == 1 && dayOptions.day <= 4, // isValid = false, disable the days // className = "nowruz", add class }; } }); ``` -------------------------------- ### Manually show JalaliDatePicker on input element Source: https://github.com/majidh1/jalalidatepicker/blob/main/README-en.md Display the JalaliDatePicker on a specific input element without automatic detection. Pass the DOM element reference to the show() method to trigger the date picker for manual initialization. ```javascript jalaliDatepicker.show(document.getElementById('YOUR_INPUT_ID')); ``` -------------------------------- ### Listen for Jalali Datepicker Change Events Source: https://github.com/majidh1/jalalidatepicker/blob/main/test/index.html Attaches an event listener to an HTML element with the ID 'aaa' to capture the 'jdp:change' event. This event is triggered by the jalaliDatepicker when a date or time selection is made. The event object, containing details about the change, is logged to the console. ```javascript document.getElementById("aaa").addEventListener("jdp:change", function (e) { console.log(e); }); ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.