Scrollable Datepicker – jQuery

Description :

Scrollable Datepicker is a Jquery plugin for select a date from a popup or inline calendar. this calendar has multiple options (minDate, maxDate, link, yearRange, selectedYear, selectedMonth, selectedDate, dateFormat, disableWeekdays, CallbackFunction, theme, yearScrollSpeed, arrows) to help the developers. If the element is ‘div’ then Scrollendar automatically decide to display in ‘inline’ method. If the element is ‘input’ field then it will be display when the element is focused.

You can browse the demo or download here.

Installation

You should include Scrollendar.css and Scrollendar.js in head tag.

<link rel="stylesheet" href="style/scrollendar.css" type="text/css" />

<script type="text/javascript" src="js/scrollander.js"></script> 

HTML:

Create one div or input field and add class or id to set scrollendar.

<div class="archive"></div>
Or 
<input type="text" id="start_date" />

jQuery:

Add .scrollendar() function to your class or ID

$(".archive").scrollendar();

Or

$("#start_date").scrollendar();

Quick View

<html>
<head>
<!-- Fonts and CSS style -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='scrollendar.css' rel='stylesheet' type='text/css'>
<!-- Scripts -->
<script src="jquery.js"></script>
<script type="text/javascript" src="scrollendar.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".scrollendar").scrollendar();
});
</script>
</head>
<body>
<div class="scrollendar"></div>
</body>
</html>

Options

  • minDate – You can set the minimum selectable date
  • maxDate – You can set the maximum selectable date
  • link – If you are using scrollendar as a calendar, then you can customize the anchor tag href here
  • yearRange – The range of years displayed in the year ScrollerBox
  • selectedYear – You can set default year before the scrollendar open
  • selectedMonth – You can set default month before the scrollendar open
  • selectedDate – You can set default date. (Format : dd-mm-yyyy – 23-08-1988)
  • dateFormat – You can set the date format which you want to display in text field or append with given anchor tag href link
  • disableWeekdays – You can disable the week ends with this option (true or false)
  • CallbackFunction – You can set the callback function that call before place the value in text field. pass the argument this.date to get the selected date. (E.g: CallbackFunction: ‘dateValidation( this.date, “user-name”, “registration-date”)’
  • theme – we have two default theme with this plugin. (”,theme1,theme2) or you can write custom css styles or add your class name with this option. (E.g: theme:’custom-class’ (or) theme:’theme2 shadow’ (‘shadow; is custome class))
  • yearScrollSpeed – You can change the scroll speed here, default and recommended is 300
  • arrows – you can show and hide the arrows which displayed above and below the scrollerBox

Demo

Calendar (with full options):

<html>
<head>
<!-- Fonts and CSS style -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='scrollendar.css' rel='stylesheet' type='text/css'>
<!-- Scripts -->
<script src="jquery.js"></script>
<script type="text/javascript" src="scrollendar.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".scrollendar").scrollendar({
yearRange:'2025-2000',
//selectedYear: '2016',
//selectedMonth: 'April',
selectedDate:'22-04-2016',// default today date
link:'archives/',
theme: 'theme2',//Available themes : '','theme1', 'theme2'
yearScrollSpeed: '350',
arrows: true,
minDate: new Date('02/15/2016'),
maxDate: new Date(),
dateFormat : 'dd/MMM/yyyy'
});
});
</script>
</head>
<body>
<div class="scrollendar"></div>
</body>
</html>

Result :

Datepicker (with full options):

<html>
<head>
<!-- Fonts and CSS style -->
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link href='scrollendar.css' rel='stylesheet' type='text/css'>
<!-- Scripts -->
<script src="jquery.js"></script>
<script type="text/javascript" src="scrollendar.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".scrollendar1").scrollendar({
yearRange:'2025-2000',
//selectedYear: '2016',
//selectedMonth: 'April',
selectedDate:'22-04-2016',// default today date
link:'archives/',
theme: 'theme2',//Available themes : '','theme1', 'theme2'
yearScrollSpeed: '350',
arrows: true,
minDate: new Date('02/15/2016'),
maxDate: new Date(),
dateFormat : 'dd-MM-yyyy',
disableWeekdays:false,
CallbackFunction : "dateFormater(this.date,'dd/mm/yyy')"
});
});
</script>
</head>
<body>
<input type="text" class="scrollendar1" />
</body>
</html>

Result :

Custom Changes

You can overwite some class for better view of scrollender with your custom design.

  • Background color – .ssscripts-datePicker{background:(colorCode or Image) !important;}
  • Font color – .ssscripts-datePicker{color:colorCode !important;}
  • Disabled Date or Previous and Next Month Font color – .ssscripts-calander-days span p{color:colorCode !important;}
  • Active or selected Date, Month, Year styles – span.ssscripts-activeYear, span.ssscropts-activeMonth, .ssscripts-calander-days span a:hover, .ssscripts-calander-days span a.active{Your changes here}
  • Change arrows style – .ssscripts-scroll-up, .ssscripts-scroll-down{Your changes here}



One comment

  1. Super Plugin for calendar…… It is efficient one for my website which is under development…..
    Thank you Admin

Leave a Reply

Your email address will not be published. Required fields are marked *