A Simple and Easy jQuery Date and Time Picker | jSunPicker

jSunPicker is a brand new jQuery plugin used to create a highly configurable date and time picker on a web page. Supports all output formats and most input formats (for manually entering the date in the input element).

Key Features:

  • Allows the date and time picker to be linked to any DOM: the entry of embedded objects.
  • It is allowed to allocate the first day of the week.
  • Custom display/output format.
  • Custom titles for days and months.
  • Custom icons.
  • Allows assigning maximum / minute date/time.
  • Broken history is also supported.
  • Callback functions.

A Vue Plugin To Select Jalali Date And Time | persian-datetime-picker

How to make use of it:

1. Load the stylesheet jSunPicker.VERSION.css within the head part and the JavaScript file jSunPicker.VERSION.js after you’ve got loaded the jQuery library as observed:

<!-- Core -->
<link href="src/jSunPicker.VERSION.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jSunPicker.VERSION.js"></script>
<!-- Optional Themes -->
<link href="themes/jSunPicker.beige.css" rel="stylesheet" />
<link href="themes/jSunPicker.blue.css" rel="stylesheet" />
<link href="themes/jSunPicker.copper.css" rel="stylesheet" />
<link href="themes/jSunPicker.gold.css" rel="stylesheet" />
<link href="themes/jSunPicker.green.css" rel="stylesheet" />
<link href="themes/jSunPicker.grey.css" rel="stylesheet" />
<link href="themes/jSunPicker.pink.css" rel="stylesheet" />
<link href="themes/jSunPicker.purple.css" rel="stylesheet" />
<link href="themes/jSunPicker.white.css" rel="stylesheet" />

2. Bind the date & time picker to an input field.


3. Customize the date & time picker through HTML data-OPTION attributes immediately on the input field.

<input id="datepicker" 

4. You may go the configuration choices within the JavaScript like this:

  startDay: 1

5. All accessible configuration choices and callback capabilities.


  language: 'en-US',
  daysTitle: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  monthsTitle: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],

  // number of characters
  dayShort: 2,             

  // number of characters       
  monthShort: 3,           

  // path/to/calendar/icon, trigger picker on clicking the icon       
  showIcon: null,    

  // '#element-id',   | jQuery selector for the inline container - be sure to give a unique one
  inline: null,                 

  // Sunday = 1, Saturday = 7  
  startDay: 1,                

  //  Available types: datetime (date+month+year+time), date, month, year, time - set the appropriate formats below    
  pickerType: 'datetime',    

  // translates to: Sunday, February 1, 1903 23:09:59  | default format: Y/m/d h:m:s  //      
  displayFormat: 'W, T d, Y H:N:S A',     

  // translates to: 9-2-1975    |  default format: U
  // The following denotes the date and time notations for this script. Mix with the separators for your desired format
  // y - two digit year, Y - four digit year, m - month number without leading zero, M - month number with leading zero
  // t - month short text, T - month long text, d - date number without leading zero, D - date number with leading zero 
  // h - hours without leading zero, H - hours with leading zero, a - meridian (am/pm), A - meridian (AM?PM)
  // n - minutes without leading zero, N - minutes with leading zero, s - seconds without leading zero,U - unix time 
  // S - seconds with leading zero, w - day of the week short (dayShort), W - day of the week long, X - military time  
  outputFormat: 'U',   

  //  '2016/03/03', | '[date-string]'  in any text format except date first (not like d-m-y or d/mmm/yyyy)       
  minDate: null,          

  //  '2016/03/23', | same as minDate        
  maxDate: null,             

  //  '4:23:45 AM', | '[time-string]' in text format (like 4:23:45 PM)     
  minTime: null,       

  //  '4:23:45 PM', | same as minTime   
  maxTime: null,          

  //  '1,7' | Sun = 1, Sat = 7
  disabledDays: null,        

  //  individual dates or date ranges separated by commas '2016/03/05,2016/03/10-2016/03/15'    
  disabledDates: null,  

  //  '2016/3/14 12:21:23 PM',
  initialDate: null,              

  // triggered when jsunpicker pops up
  onShow: $.noop,   

  // triggered after jsunpicker is closed (destroyed)
  onClose: $.noop,  

  // triggered when a date is selected
  onSelect: $.noop  


Easy Customizable Date And Time Picker Plugin, jSunPicker Plugin/Github


See Demo And Download

Official Website(sunalive): Click Here

This superior jQuery/javascript plugin is developed by sunalive. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…