Have ideas to improve npm?Join in the discussion! »

    persian-datepicker

    1.2.0 • Public • Published

    Persian Date Picker

    This Date picker work with Iranian calendar.

    Jalali calendar datepicker, which depends on persianDate

    More info at Wikipedia

    Note: from v1.0.0 persianDatepicker support gregorian calendar

    npm version Bower version Travis-ci

    Star Issue Fork

    Table of content:

    CDN

    Dependency

    persian-datepicker 1.x.x need persian-date 1.x.x

    Install

    npm install persian-datepicker
     
    bower install persian-datepicker

    Usage

    <head>
      <link rel="stylesheet" href="css/persian.datepicker.css"/>
      <script src="js/jquery.js"></script> 
      <script src="js/persian.date.js"></script> 
      <script src="js/persian.datepicker.js"></script> 
    </head>
     
    <script type="text/javascript">
      $(document).ready(function() {
        $(".example1").pDatepicker();
      });
    </script> 
     
    <input type="text" class="example1" />

    Options table

    Options full document

    name type default description
    calendarType string 'persian' Set default calendar mode of datepicker, available options: 'persian', 'gregorian'
    calendar object Calendar type and localization configuration
    calendar.persian object Persian calendar configuration
    calendar.persian.locale string 'fa' Set locale of Persian calendar available options: 'fa', 'en'
    calendar.persian.showHint boolean false If set true, small date hint of this calendar will be shown on another calendar
    calendar.persian.leapYearMode string algorithmic Persian calendar leap year calculation mode, available options: 'algorithmic', 'astronomical'
    calendar.gregorian object Gregorian calendar configuration
    calendar.gregorian.locale string 'en' set locale of Gregorian calendar available options: 'fa', 'en'
    calendar.gregorian.showHint boolean false If set true, small date hint of this calendar will be shown on another calendar
    responsive boolean true If set true make enable responsive view on mobile devices
    initialValue boolean true If set true datepicker init with input value date, use data-date property when you want set inline datepicker initial value
    initialValueType string 'gregorian' Initial value calendar type, accept: 'persian', 'gregorian'
    inline boolean false If set true datepicker render inline
    persianDigit (DEPRECATED from 1.0.0) boolean true If set true all digit shows as persian digit
    viewMode string 'day' Accept 'day', 'month', 'year'
    format string 'LLLL' The date format, combination of d, dd, m, mm, yy, yyy. format document
    formatter function function(unixDate){return unixDate} Main Input value formatter function
    altField string null An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field. acceptable value: : '#elementId','.element-class'
    altFormat string 'unix' The date format, combination of d, dd, m, mm, yy, yyy. format document
    altFieldFormatter function function(unixDate){return unixDate} Format value of alt field input input
    minDate Unix Offset null Set min date on datepicker, prevent user select date before given unix time
    maxDate Unix Offset null Set max date on datepicker, prevent user select date after given unix time
    navigator object Navigator config object
    navigator.enabled boolean true Make navigator enable or disable
    navigator.scroll object Navigate by scroll configuration
    navigator.scroll.enabled boolean true If you want prevent to navigate with mouse-wheel event make this option false
    navigator.text object Navigator text config object
    navigator.text.btnNextText string '<' Text of next button
    navigator.text.btnPrevText string '>' Text of previews button
    navigator.onNext event function (navigator) {} Called when navigator goes to next state
    navigator.onPrev event function (navigator) {} Called when navigator goes to prev state
    navigator.onSwitch event function (state) {} Called when navigator switch
    toolbox object Toolbox object options.
    toolbox.enabled boolean true Enable/Disable toolbox object
    toolbox.text (DEPRECATED from 1.0.0) object
    toolbox.text.btnToday (DEPRECATED from 1.0.0) string 'امروز' Today button text
    toolbox.todayButton object Toolbox today button configuration
    toolbox.todayButton.enabled boolean false Make toolbox today button enable or disable
    toolbox.todayButton.text object Today button text
    toolbox.todayButton.text.fa string 'امروز' Show when current calendar is Persian
    toolbox.todayButton.text.en string 'Today' Show when current calendar is Gregorian
    toolbox.todayButton.onToday event function () {} Called when today button clicked
    toolbox.submitButton object Toolbox today button configuration
    toolbox.submitButton.enabled boolean true Make toolbox submit button enable or disable
    toolbox.submitButton.text object Submit button text
    toolbox.submitButton.text.fa string 'تایید' Show when current calendar is Persian
    toolbox.submitButton.text.en string 'submit' Show when current calendar is Gregorian
    toolbox.submitButton.onSubmit event function () {} Called when submit button clicked
    toolbox.calendarSwitch object
    toolbox.calendarSwitch.enabled boolean true Make calendar switch enable or disable
    toolbox.calendarSwitch.format string 'MMMM' Calendar switch text format string
    toolbox.calendarSwitch.onSwitch event function () {} Called when calendar switch clicked
    toolbox.onToday (DEPRECATED from 0.6.0) event function(toolbox){return unixDate} Event called when today btn clicked
    onlyTimePicker (mode) boolean false If true, all pickers hide and just show timepicker
    onlySelectOnDate boolean true If true, date select just by click on day in month grid, and when user select month or year selected date doesnt change
    checkDate function function (unix) { return true; } Validate date access before render
    checkMonth function function (month) { return true; } Validate month access before render
    checkYear function function (year) { return true; } Validate year access before render
    timePicker object
    timePicker.enabled boolean false Make timePicker enable or disable
    timePicker.step int 1 The amount that increases or decreases by pressing the button
    timePicker.hour object
    timePicker.hour.enabled boolean true Enable/Disable hour in timepPicker object
    timePicker.hour.step int null The amount that increases or decreases hour, by pressing the button. overwrite by timepicker.step
    timePicker.minute object
    timePicker.minute.enabled boolean true Enable/Disable minute in timePicker object
    timePicker.minute.step int null The amount that increases or decreases minute, by pressing the button. overwrite by timepicker.step
    timePicker.second object
    timePicker.second.enabled boolean true Enable/Disable second in timePicker object
    timePicker.second.step int null The amount that increases or decreases second, by pressing the button. overwrite by timepicker.step
    timePicker.meridian object
    timePicker.meridian.enabled boolean true Enable/Disable meridian in timePicker object
    dayPicker object
    dayPicker.enabled boolean true Enable/Disable dayPicker object
    dayPicker.titleFormat string 'YYYY MMMM' DayPicker title format string
    dayPicker.titleFormatter function function (year, month) {} DayPicker title formatter function
    dayPicker.onSelect event function (selectedDayUnix) {} Called when date select by user
    monthPicker object
    monthPicker.enabled boolean true Enable/Disable monthPicker object
    monthPicker.titleFormat string 'YYYY' MonthPicker title format string
    monthPicker.titleFormatter function function (unix) {} MonthPicker title formatter function
    monthPicker.onSelect event function (monthIndex) {} Called when month select by user
    yearPicker object
    yearPicker.enabled boolean true Enable/Disable yearPicker object
    yearPicker.titleFormat string 'YYYY' YearPicker title format string
    yearPicker.titleFormatter function function (year) {} YearPicker title formatter function
    yearPicker.onSelect event function (year) {} Called when year select by user
    onSelect event function (unixDate) {} Called when date Select by user.
    onSet event function (unixDate) {} Called when date Select by api.
    onShow event function () {} Called when datePicker shown
    onHide event function () {} Called when datePicker hidden
    onToggle event function () {} Called when datePicker visibility toggle
    onDestroy event function () {} Called when datePicker destroyed
    autoClose boolean false If true datePicker close after select date
    position string 'auto' Position of datepicker element relative to input element, accept 'auto', [x,y]
    observer boolean false If true datepicker update self by user inputted date string, accept 'yyyy/mm/dd'
    inputDelay int 800 (millisecond) Time for last user key-down event, accept millisecond
    template string null By default datepicker have a template string, and you can overwrite it simply by replace string in config.

    license

    Freely distributable under the terms of the MIT license.

    Install

    npm i persian-datepicker

    DownloadsWeekly Downloads

    1,191

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    1.89 MB

    Total Files

    91

    Last publish

    Collaborators

    • avatar