dmuy / dcalendar

JQuery calendar plugin plus date picker for input fields.

You might want to checkout the duDatepicker plugin.

DCalendar

JQuery calendar plugin plus date picker for input fields.

How to use

Make sure you include the jQuery library first. Include dcalendar.picker.css and dcalendar.picker.js in your html file:

<link rel="stylesheet" type="text/css" href="dcalendar.picker.css">
<script type="text/javascript" src="dcalendar.picker.js"></script>

Add a reference on your input element for later use:

<input type="text" id="datepicker"/>

Then add this piece of code in your script tag:

<script>
  $(document).ready(function(){
    $('#datepicker').dcalendarpicker(); //Initializes the date picker
  });
</script>

Formatting

The default string format of the date is mm/dd/yyyy. You can specify the format you want by adding a parameter on initialization:

<script>
  $(document).ready(function(){
    $('#datepicker').dcalendarpicker({format: 'mm-dd-yyy'}); //Initializes the date picker and uses the specified format
  });
</script>

The above code will output a date in this format mm-dd-yyyy, for example: 10-31-2016 - which is October 31, 2016. You can specify other format you want, like mmm dd, yyyy which would output something like Oct 01, 2016.

Variable	Code	Output
Month	m	1
	mm	01
	mmm	Jan
	mmmm	January
Date	d	1
	dd	01
Year	yy	16
	yyyy	2016

Min and Max

You can also specify the mininum and/or maximum date the user can select on othe date picker. Just specify data-mindate and/or data-maxdate attributes on your input element. The acceptable values for these attributes are today or a specific date using this format: mm/dd/yyyy:

<input type="text" id="datepicker" data-mindate="today"/>       //Dates enabled ranges from the current date onwards.
<input type="text" id="datepicker" data-mindate="10/30/2016"/>  //Dates enabled ranges from October 30, 2016 onwards.
<input type="text" id="datepicker" data-maxdate="today"/>       //Dates enabled ranges from earlier dates until current date.
<input type="text" id="datepicker" data-maxdate="10/30/2016"/>  //Dates enabled ranges from previous dates of October 10, 2016 until October 10, 2016

You can also specify the mininum and maximum date to create a specific date range acceptable:

<input type="text" id="datepicker" data-mindate="1/1/2016" data-maxdate="2/1/2016"/>  //Dates enabled ranges from January 1 to February 1, 2016

Range From and To

For situations where you have two inputs representing a date range (from & to), you can restrict the minimum and maximum date based on the values of the input elements - the maximum allowed date for date from (input element) is the value of date to (input element), and the minimum allowed date for date to is the value of the date from input.

You can do this by adding the data-rangefrom and/or data-rangeto attributes. The value for these attributes is the id reference of the input element.

Example:

<input type="text" id="datefrom" data-rangeto="#dateto"/>   //Maximum enabled date is <= value of #dateto
<input type="text" id="dateto" data-rangefrom="#datefrom" data-maxdate="today"/>  //Minimum enabled date is >= value of #datefrom

Event

The event datechanged is fired after selection of date in the date picker. You can use this to get the new date value:

<script>
  $(document).ready(function(){
    $('#datepicker').dcalendarpicker({format: 'mm-dd-yyy'}).on('datechanged', function(e){
      alert(e.date);
    });
  });
</script>

The above code will alert the new date selected. For example: 01-16-2016 or January 16, 2016

Themes

You can specify the color theme of the date picker by adding theme option upon initialization:

<script>
  $(document).ready(function(){
    $('#datepicker').dcalendarpicker({theme: 'green'});
  });
</script>

Predefined themes are: red,blue (default), green, purple, indigo and teal. If you don't specify the theme to use or specify a theme which isn't there, the default theme will be used.

dcalendar's Issues

a Big Bug!

Hey Sir,look at these,what the hell with you with below?why do you write the ';' after 'var cal = that.calendar'. God Damed!Thanks and Fu,ck,you!!!
LOOK AT THIS 👎 var cal = that.calendar;
curr = cal.find('.calendar-dates'),
dayLabel = cal.find('.calendar-labels'),
currMonth = cal.find('.calendar-curr-month'),
container = cal.find('.calendar-date-holder'),
cElem = curr.clone(),
rows = [], cells = [], count = 0;

Set The Date manually after object is created

I have a form where I use the plugin for several fields. If I change the textbox value using javascript the plugin shows using "today" as current value and Im not able to find the way to work around this.

Is there any way I can some function so it triggers the "selectedDate" event with a custom value?

Calls this.reformatDate before setting this.options, crashes

Here on line 29 it can call reformatDate, but it doesn't set this.options until line 34, leading to a "cannot read property of undefined" error.

DCalendar/dcalendar.picker.js

Line 29 in a5226d7

var dateObj = this.reformatDate(this.calendar.prev().val());

I fixed by moving line 34 near the top, seems to work fine.

How to set minDate and maxDate

Hi dmuy,
I was searching for a jquery date picker with min date and max date setting option and i came across your plugin, can you please explain how to set minDate and maxDate.
Thank you.

Change event not firing

With <input type="text"> the change event does not fire. It looks like a typo here - "onchange" should be "change"

DCalendar/dcalendar.picker.js

Line 335 in a5226d7

that.val(e.date).trigger('onchange');

about IE8

Hi sir
I find some problems in your work.I'll show you below.
1.you use the '' tag in the content;
2.you use the rgb&rgba in the CSS for IE8;
3.you have some programmer mistakes in your JS which like you write the ',' but you actually write the ';'.
That's all!Thanks for your share
Sincerely
Roger
2018.07.24

PAST DATE SHOULD BE ABLE TO DISABLE

Is there any option to Disable previous dates ?

date change event in dcalendar

How can get get the date clicked from dcalendar ???

datechanged event is not fired

Hey,
i wanted to listen to your datechanged event but currently its never triggered. I used the following code:

<script>
  $(document).ready(function(){
    $('#datepicker').dcalendarpicker({format: 'mm-dd-yyy'}).on('datechanged', function(e){
      console.log (e);
    });
  });
</script>

The calendar gets attached to the input field but when i select something in it the event is never fired. I would need this so i could update values in my vuejs instance after the user selected a date.

Thanks and greetings
Leo

Date Format unchangable

Hi Is there a way to change the default date format. I tried format: 'dd/mm/yyyy'
But still the date is picked as mm/dd/yyyy. Please can you help me on this.