JSFiddle - React, Tailwind, and code Playground

by abude

HTML

<script type="text/javascript">
        window.onload = function(){
                new JsDatePick({
                        useMode:2,
                        target:"start_date",
                        dateFormat:"%Y-%m-%d"

                });
                 new JsDatePick({
                        useMode:2,
                        target:"end_date",
                        dateFormat:"%Y-%m-%d"

                });

        };
</script>

<form method='get'>
  <label>Between: </label>
  <input id='start_date' type='text' name='start' ></input>
  <input id='end_date' type='text' name='end' ></input>
 
</form><br/>

CSS

/*

    Copyright 2009 Itamar Arjuan
    jsDatePick is distributed under the terms of the GNU General Public License.

*/

.JsDatePickBox { position:relative; width:212px; font-family:Arial; }

.JsDatePickBox .jsDatePickCloseButton { cursor:pointer; position:absolute; z-index:1; top:1px; right:10px; width:33px; height:13px; background:url(img/closeButton_normal.gif) left top no-repeat; }
.JsDatePickBox .jsDatePickCloseButtonOver { cursor:pointer; position:absolute; z-index:1; top:1px; right:10px; width:33px; height:13px; background:url(img/closeButton_over.gif) left top no-repeat; }
.JsDatePickBox .jsDatePickCloseButtonDown { cursor:pointer; position:absolute; z-index:1; top:1px; right:10px; width:33px; height:13px; background:url(img/closeButton_down.gif) left top no-repeat; }

.JsDatePickBox .boxLeftWall { float:left; width:7px; margin:0; padding:0; }
.JsDatePickBox .boxLeftWall .leftTopCorner{ margin:0; padding:0; width:7px; height:8px; background:url(img/boxTopLeftCorner.png) left top no-repeat;  overflow:hidden; }
.JsDatePickBox .boxLeftWall .leftBottomCorner{ margin:0; padding:0; width:7px; height:8px; background:url(img/boxBottomLeftCorner.png) left top no-repeat;  overflow:hidden; }
.JsDatePickBox .boxLeftWall .leftWall{ margin:0; padding:0; width:7px; background:url(img/boxSideWallPx.gif) #ffffff left top repeat-y; overflow:hidden; }

.JsDatePickBox .boxRightWall { float:left; width:7px; margin:0; padding:0;}
.JsDatePickBox .boxRightWall .rightTopCorner{ margin:0; padding:0; width:7px; height:8px; background:url(img/boxTopRightCorner.png) left top no-repeat;  overflow:hidden; }
.JsDatePickBox .boxRightWall .rightBottomCorner{ margin:0; padding:0; width:7px; height:8px; background:url(img/boxBottomRightCorner.png) left top no-repeat;  overflow:hidden; }
.JsDatePickBox .boxRightWall .rightWall{ margin:0; padding:0; width:7px; background:url(img/boxSideWallPx.gif) #ffffff right top repeat-y; overflow:hidden; }

.JsDatePickBox .topWall { position:absolute;...

JavaScript

/*
    Copyright 2009 Itamar Arjuan
    jsDatePick is distributed under the terms of the GNU General Public License.
    This JsDatePick makes use of the jQuery library found at http://jquery.com/
*/
/*
    Configuration settings documentation:
    
    useMode (Integer) – Possible values are 1 and 2 as follows:
        1 – The calendar's HTML will be directly appended to the field supplied by target
        2 – The calendar will appear as a popup when the field with the id supplied in target is clicked.
    
    target (String) – The id of the field to attach the calendar to , usually a text input field when using useMode 2.
    
    isStripped (Boolean) – When set to true the calendar appears without the visual design - usually used with useMode 1
    
    selectedDate (Object) – When supplied , this object tells the calendar to open up with this date selected already.
    
    yearsRange (Array) – When supplied , this array sets the limits for the years enabled in the calendar.
    
    limitToToday (Boolean) – Enables you to limit the possible picking days to today's date.
    
    cellColorScheme (String) – Enables you to swap the colors of the date's cells from a wide range of colors.
        Available color schemes: torqoise,purple,pink,orange,peppermint,aqua,armygreen,bananasplit,beige,
        deepblue,greenish,lightgreen,  ocean_blue <-default
    
    dateFormat (String) - Enables you to easily switch the date format without any hassle at all! 
        Should you not supply anything this field will default to: "%m-%d-%Y"
        
        Possible values to use in the date format:
        
        %d - Day of the month, 2 digits with leading zeros
        %j - Day of the month without leading zeros
        
        %m - Numeric representation of a month, with leading zeros
        %M - A short textual representation of a month, three letters
        %n - Numeric representation of a month, without leading zeros
        %F - A full textual representation...