Yet Another jQuery Date Time Picker Plugin filthypillow - Download Yet Another jQuery Date & Time Picker Plugin - filthypillow

Download Yet Another jQuery Date & Time Picker Plugin – filthypillow

By Posted on

This time I will share jQuery Plugin and tutorial about Yet Another jQuery Date & Time Picker Plugin – filthypillow, hope it will help you in programming stack.

Yet Another jQuery Date Time Picker Plugin filthypillow - Download Yet Another jQuery Date & Time Picker Plugin - filthypillow
File Size: 94.3 KB
Views Total: 6920
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download



filthypillow is yet another jQuery plugin for calendar and date-time picker, features html template, shortcut keys, custom time zone, selection steps, and events & API support. Please note that the plugin requires moment.js for parsing, validating, manipulating, and formatting dates.

Basic Usage:

1. Include jQuery javascript library and required moment.js library on your web page.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2 <script type="text/javascript" src="libs/moment.js"></script>

2. Include jQuery filthypillow plugin files on the web page.

view source
1 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
2 <script type="text/javascript" src="./libs/moment.js"></script>

3. Create an input field that will popup a time-date picker when on focus.

view source
1 <input class="filthypillow-demo" />

4. The javascript.

view source
01 <script>
02 var $fp = $( ".filthypillow-demo" );
03  
04 $fp.filthypillow( {
05 minDateTime: function( ) {
06 return moment( ); //now
07 }  
08 } );
09 $fp.on( "focus", function( ) {
10     $fp.filthypillow( "show" );
11     } );
12 $fp.on( "fp:save", function( e, dateObj ) {
13     $fp.val( dateObj.format( "MMM DD YYYY hh:mm A" ) );
14     $fp.filthypillow( "hide" );
15     } );                                                   
16 </script>

5. Prototypes.

view source
1 currentStep: null,
2 dateTime: null,
3 currentTimeZone: null, //null is browser default
4 currentDigit: 0, //first or second digit for key press
5 isActiveLeadingZero: 0, //user types in 0 as first digit
6 steps: [ "month", "day", "hour", "minute", "meridiem" ],
7 stepRegExp: null,
8 isError: false, //error is being shown
9 isActive: false, //whether the calendar is active or not

6. Options.

view source
1 startStep: "day", // month, day, hour, minute, meridiem
2 minDateTime: null, // //function returns moment obj
3 maxDateTime: null, //function returns moment obj
4 initialDateTime: null //function returns moment obj

Change logs:

v1.5.0 (2016-02-27)

  • update

v1.4.0 (2015-10-15)

  • bugs fixed.

v1.3.2 (2015-09-09)

  • bugs fixed.

v1.3.1 (2014-09-09)

  • bugs fixed.

v1.2.2 (2014-09-02)

  • bugs fixed.

v1.2.0 (2014-01-29)

  • bugs fixed.

v1.0.0 (2014-01-16)

  • bugs fixed.

v0.0.2 (2013-11-28)

  • Some minor fixes and refactoring to min/max ranges

This awesome jQuery plugin is developed by aef-. For more Advanced Usages, please check the demo page or visit the official website.




source : jqueryscript.net

Related posts: