Rus / Eng

Simple JavaScript date picker calendar

 Try it


This date picker calendar completely independent and easily integrated into any project and user friendly.

  • No jQuery or any add-ons needed.
  • Multi language supports.
  • Just one JS file, plus CSS styles.
  • It is possible to use AJAX or to connect your functions.
  • Highly-customizable.
  • Requirements IE 10+

Just use:

<link rel="stylesheet" type="text/css" href="" />
<script type="text/javascript" src=""></script>

Then add to the tag:

<input onClick="xCal(this)" onKeyUp="xCal()">

or call for all tags with a CSS class .datepicker:


That's all!


Download JavaScript datepicker calendar

Download CSS


Description functions and their parameters

General function xCal(object, delim, order)

All transfer parameters are optional.

First parameter object

As the first parameter, you can transfer an object or its ID: xCal(this) or xCal('date2'). If there are no parameters, the calendar closes. To get the current date, the function can be called with the value of the first parameter equal to two alert(xCal(2)). Example.

The second and third parameter

If the object is passed as the second parameter, then the third parameter is ignored. An object can contain a set of some parameters from the table below. Otherwise, optional "delim" and "order" parameters are set (see the description of these parameters in the table below).

Examples of using the function xCal():

<input onClick="xCal(this)" onmouseenter="xCal(this)" onClick="xCal()" onKeyUp="xCal()" oninput="xCal()">
<input onClick="xCal(this, '-', 1)" onClick="xCal()" oninput="xCal()">
<input onClick="xCal(this, {lang: 'ru', order: 1})" onClick="xCal()" oninput="xCal()">
<strong onClick="alert(xCal(2))">Current date</strong>

List of calendar options available for installation

ParameterPossible valuesDefault valueDescription
lang"en", "ru""en"Interface language. It is possible to add the necessary languages to the js file by analogy with the existing
classstring"xcalend"CSS class name for visualizing the calendar
delimstring"."The separator between the day, month and year
order0 - DD.MM.YYYY,
0If the value is equal to one, the reverse order is used YYYY.MM.DD, at a value of two, the order is used in the American manner MM.DD.YYYY, in other cases and by default DD.MM.YYYY
idstringabsentUnique calendar ID. If absent, the name from class is used
autoOn0 - off,
1 - on
1Automatic opening of the calendar when you hover the cursor on the field. Used by function xCal.all(). For a special case, you must use the onmouseenter="xCal(this)"
autoOff0 - off,
1 - on
1Automatic closing of the calendar when the cursor leaves the calendar
now0 - no, 1 - yes1The ability to set the current date in one click
set00 - no, 1 - yes0Ability to set a value "00.00.0000" in one click, in accordance with the set display order value
x0 - no, 1 - yes1Display the "Close" button
hide0 - no, 1 - yes1Hide calendar after selecting date
tostring or elementdocument.bodyPlacement of the calendar.
If this parameter is a string, then an element with the specified ID is used
fnstring or functionabsentCalling a function when selecting a date.
If the function name is specified as a string, then the function with that name is passed the selected date as the only parameter.
If the type of this parameter is a function, then two parameters are passed to it: the selected date and object with all the current set parameters specified in this reference table.

Enabling the calendar for all items the same class. Function xCal.all(className, delim, order)

Function xCal.all(className, delim, order) is designed to attach the calendar to all fields with the CSS class specified in the first parameter, className. This function has the same parameters as the function xCal(). Only the first parameter differs, which must be the CSS class name and is mandatory.

Example of using the function xCal.all():

// Apply to all tags with the class "xcalend"
xCal.all("xcalend", {
lang: "ru", // Russian language
x: 0, // Remove the "Close" button
delim: "/" // The separator between the numbers

Setting defaults. Function xCal.set(options)

Function xCal.set(options) is intended for setting the default values.

Example of using the function xCal.set():

// Setting defaults for calendar
lang: "ru", // Russian language
order: 1, // Reverse order
delim: "-" // Delimiter between the numbers

Use examples

Example 1

Date selected. Click on the date field to call the calendar:

<input type="text" value="06.10.2017 20:12:45" size="19" onClick="xCal(this)" onKeyUp="xCal()">

Example 2

If the field is empty, the calendar will offer the current date. In this example, the automatic opening of the calendar is also enabled when you hover the cursor on the field:

<input type="text" value="" size="10" onClick="xCal(this)" onmouseenter="xCal(this)" onKeyUp="xCal()">

Example 3

Calendar opens when you click on the link:
Open calendar, Clear field, Set current date

<input id="date3" type="text" value="" size="10" onClick="xCal()" onKeyUp="xCal()" oninput="xCal()">
<a href="" onClick="xCal('date3'); return false">Open calendar</a>,
<a href="" onClick="document.getElementById('date3').value=''; return false">Clear field</a>,
<a href="" onClick="document.getElementById('date3').value=xCal(2); return false">Set current date</a>

Example 4

Same as in the previous example, but in the reverse order and with the dash separator:
Open calendar, Clear field, Set current date

<input id="date4" type="text" value="" size="10" onClick="xCal()" onKeyUp="xCal()" oninput="xCal()">
<a href="" onClick="return xCal('date4','-',1)">Open calendar</a>,
<a href="" onClick="document.getElementById('date4').value=''; return false">Clear field</a>,
<a href="" onClick="document.getElementById('date4').value=xCal(2,'-',1); return false">Set current date</a>

Example 5. Using xCal.all()

In this example, events are assigned to all items with the "datepicker" class:

<input type="text" class="datepicker" placeholder="Field 1">
<input type="text" class="datepicker" placeholder="Field 2">

Example 6

The function can be applied to any tag. The last result will always be contained in xCal.value.
Click HERE or at this point and the last selected result can always be viewed by this link.
And this is the result only for "HERE".

Click <b id="date6" onClick="xCal('date6')">HERE</b> or
<b class="xcal">at this point</b>
and the last selected result can always be viewed by
<a href="" id="date6" onClick="alert(xCal.value); return false">this link</a>.
And this is the result only for "<a href="" id="date6"
return false"><b>HERE</b></a>"

Example 7. Using xCal.set()

You can dynamically change the default settings. To change the language in all the examples above, except where explicitly indicated in the passed parameter, click on the field:

<input type="text" size=3 value="ENG"
onClick="if(this.value!=='ENG'){this.value='ENG';xCal.set({lang: 'en'})} else {this.value='RUS';xCal.set({lang: 'ru'})}"
style="cursor: pointer" readonly>

Example 8. AJAX

Using your functions. This example is suitable for AJAX. Replace "alert" with your function:

<div id="date8"></div>
<style>#cssworldru8{position: static}</style>
xCal("date8", {
id: "cssworldru8", // Set a unique ID
"class": "xcalend", // CSS class defines the appearance of the caledar
hide: 0, // Do not hide the calendar
x: 0, // Disable calendar closure button
autoOff: 0, // Disable auto-hide
to: "date8", // Place a calendar inside an element with an id=date8
fn: "alert" // Call the function with the specified name, the selection result will be transferred to it


.xcalend {
position: absolute;
z-index: 999;
width: 150px;
line-height: 1.2em;
font-size: 15px;
text-align: center;
background: #fff;
border: 2px solid #ddd;
padding: 5px;
.xcalend td {
cursor: pointer;
padding: 5px;
.xcalend thead td {
color: #333;
.xcalend thead tr:last-child td {
font-size: 12px;
background: #fff;
color: #555;
cursor: default;
.xcalend tbody td {
color: #025;
.xcalend tfoot td {
color: #333;
.xcalend tbody td.tday {
background: #eee;
font-weight: bold;
.xcalend tbody td:hover, .xcalend td:hover {
background: #025;
color: #acf;
.xcalend tbody td:nth-child(n+6) {
color: #e78c5c;
.xcalend .cal-first td:nth-last-child(-n+2) {
color: #e78c5c;
.xcalend tbody {
background: #d00;
color: #fff;
font-weight: bold;
.xcalend tbody td.bold {
font-weight: bold;
.xcalend tbody b, .xcalend tbody b {
display: none;
.xcalend tbody b, .xcalend tbody b {
display: inline;
.xcalend a {
text-decoration: none;
.xcalend th a {
color: #ccc;
display: block;
padding: 5px 0;