Date Picker

</ head>

</ body>

<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
  window.CodeCrumbs.DatePicker({
    dateFieldSelector: '.date-field-class',
    format: 'M S y',
  })
</script>

HTML/Embed

Only tabs with a " " have code.
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@latest/index.min.js"></script>
<script>
  window.CodeCrumbs.DatePicker({
    dateFieldSelector: '.date-field-class',
    format: 'M S y',
  })
</script>
Only tabs with a " " have code.
Only tabs with a " " have code.
<!-- CodeCrumbs -->
<script>
!function(e,t){e[t]=new Proxy(e[t]||{},{get:(e,o)=>new Proxy(e[o]||function(){},{apply:(n,r,a)=>{const c=()=>e[o](...a);"complete"===document.readyState?c():document.addEventListener("readystatechange",(n=>{"complete"===n.target.readyState&&(e?.[o]?c():console.error(`${t}.${o} is not a function. Did it load correctly from the CDN? If not, did you use the correct name.`))}))}})})}(globalThis,"CodeCrumbs");
</script>
Only tabs with a " " have code.
If you have already pasted this code into your project then you can skip this. If you haven't, and it's your first time using CodeCrumbs, then copy this code and navigate to your sites global settings > Custom Code tab > paste it into the <head> (first custom code block). It just needs to exist once.
Author
Felice Gattuso
Updated on
May 8, 2024

How to use:

Unlock more with PRO

Want to learn how to use this Crumb? Unlock detailed documentation, video tutorials, comments & support!

Upgrade to Pro

Unlock more with PRO

Want to learn how to use this Crumb? Unlock detailed documentation, video tutorials, comments & support!

Upgrade to Pro

Date Picker Options:

Option Type Default Descrption
dateFieldSelector string -- class, id, or html tag
language string 'en' Read Documentation
isExpandable boolean true open/close full size picker
onlyShowAsExpanded boolean true full size picker only
format string 'd-m-y' Read Documentation
doubleView boolean false show two months at a time
disabledWeekDays string -- Read Documentation
minDate string -- Read Documentation
maxDate string -- Read Documentation
minYear string -- Read Documentation
maxYear string -- Read Documentation
startWeekOnMonday boolean false instead of Sunday
dateRange boolean false Read Documentation
minRange number -- Read Documentation
maxRange number -- Read Documentation
setDateForThisSelector string -- Read Documentation
showArrowsOnHover boolean true instead of always
overlay boolean false Show bg overlay when open
onChange callback () -- Read Documentation
onRangeSet callback () -- Read Documentation
onDatePickerOpen callback () -- Read Documentation
onDatePickerExit callback () -- Read Documentation
styles { object } -- Read Documentation


language Documentation:

Below is a list of languages. Copy the script for language you wish to use and place it underneath the Date Picker script (above the Date Picker function). Next, copy the abbreviated "value" from the second column and use that as the value for the language option in the Date Picker function.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-ES.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  language: 'es'
})
</script>
Language Value Script
Arabic 'ar'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-AR.min.js"></script>
          
Danish 'da'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-DA.min.js"></script>
          
German 'de'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-DE.min.js"></script>
          
Spanish 'es'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-ES.min.js"></script>
          
French 'fr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-FR.min.js"></script>
          
Greek 'gr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-GR.min.js"></script>
          
Hungarian 'hu'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-HU.min.js"></script>
          
Italian 'it'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-IT.min.js"></script>
          
Korean 'ko'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-KO.min.js"></script>
          
Dutch 'nl'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-NL.min.js"></script>
          
Polish 'pl'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-PL.min.js"></script>
          
Portuguese 'pt'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-PT.min.js"></script>
          
Russian 'ru'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-RU.min.js"></script>
          
Slovenian 'si'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-SI.min.js"></script>
          
Turkish 'tr'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-TR.min.js"></script>
          
Ukrainian 'uk'
            <script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/lang/datepicker-language-UK.min.js"></script>
          


format Documentation:

Below you will see values for various formatting options. The value is a string which means we can combine them any way we'd like. You can use /, - or , as an example in between the format values to display the date however you'd like.

Example: "WW the S" would display as "Monday the 5th." Play around with it!

Value Description
'y' four digit year value, e.g. 2019
'MM' full name of the month, e.g. January
'M' short name of the month, e.g. Jan
'WW' full name of the weekday, e.g. Monday
'W' short name of the weekday, e.g. Mon
'w' weekday number, as per getDay() javascript function, e.g. 1
'mm' month in numbers with leading zero, e.g. 01
'm' month in numbers without leading zero, e.g. 1
'dd' weekday in numbers with leading zero, e.g. 01
'd' weekday in numbers without leading zero, e.g. 1
'S' weekday in numbers with a suffix ending, e.g. 1st


disabledWeekDays Documentation:

If you'd like certain days of the week to not be selectable, then you can use the disabledWeekDays option. This option takes a 'string' as a value with the options listen below. You can combine these values in a string by using a comma to separate the values. For example: '0, 6' would disable Saturdays and Sundays from being selected.

Day Value
Sunday '0'
Monday '1'
Tuesday '2'
Wednesday '3'
Thursday '4'
Friday '5'
Saturday '6'


minDate and maxDate Documentation:

Use the minDate and the maxDate options if you want to make the dates selectable from or until the defined date. Dates must be provided in the standard format yyyy/mm/dd (e.g. '2019/03/28').

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  minDate: '2019/01/01',
  maxDate: '2024/01/01',
})
</script>
Option Type
minDate string
maxDate string


minYear and maxYear Documentation:

Use the minYear and the maxYear options to set the maximum and minimum selectable year. The selected year must be provided in the format yyyy (e.g. '2019').

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  minYear: '2019',
  maxYear: '2024',
})
</script>
Option Type Default
minYear number currentYear - 50
maxYear number currentYear + 50


dateRange Documentation:

The range option can be set up on one or two elements. When enabled, this option allows the user to select a start and an end date from the same date picker. In case of two inputs, it will automatically fill the start date on the first input and the end date on the last.

Option Type Default
dateRange boolean false


minRange and maxRange Documentation:

If set, these limit the range selection based on the value given when user starts selecting a range date. The value indicates the number of days selectable. Of course, it works only when the range option has been set as true.

Option Type
minRange number
maxRange number


setDateForThisSelector Documentation:

You can use setDateForThisSelector to set the selected date value as another input fields value. This might be useful if you want to trigger the Date Picker with a button instead of an input field for example. Then you can set a hidden input fields value with the date that has been selected. This option takes a string with the value being a class, id, attribute or html tag.

Option Type
setDateForThisSelector string


Event Callback Documentation:

We have 4 events we can listen for, which are the parameters listed below. They each take a callback function as their value. You can use the res argument to access the selected date output.

In the example below, you can see we are using the date output to show the user a message with the date that they have selected. You will also notice that we are using the format we want after res.output to display the date how we'd like.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  onChange: (res) => {
  	console.log(`You have selected ${res.output.mm} / ${res.output.dd} / ${res.output.y}`);
  }
})
</script>
Option Type arguments
onChange callback () res
onRangeSet callback () res
onDatePickerOpen callback () res
onDatePickerExit callback () res


styles Documentation:

The styles option takes an object as its value. Inside that object we have several style options we can use as shown in the table below, and you can choose to use only the ones you want. The style options take a 'string' as a value. That string can be any CSS value. For example, you can see that the default accentBackgroundColor is a gradient.

Example:
<!-- CODECRUMBS DATE PICKER -->
<script src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/date-picker@0.1.4/index.min.js"></script>
<script>
window.CodeCrumbs.DatePicker({
  dateFieldSelector: '.date-field-class',
  format: 'M S y',
  styles: {
  	backgroundColor: '#FFFFFF',
		backgroundOverlay: 'rgba(0, 0, 0, .2)',
		primaryTextColor: '#333333',
		secondaryTextColor: '#FFFFFF',
		tertiaryTextColor: '#FD4741',
		accentBackgroundColor: 'linear-gradient(45deg, #e61e68 0%, #FD4741 100%)',
		borderRadius: '.35em',
		dropShadow: '0 0 2.5em rgba(0, 0, 0, 0.1)',
		dateRangeBackgroundColor: 'rgba(0, 0, 0, 0.05)',
  }
})
</script>
Option Type default description
backgroundColor string '#ffffff' general background color
backgroundOverlay string 'rgba(0, 0, 0, .2)' bacground overlay color
primaryTextColor string '#333333' main text color on background
secondaryTextColor string '#ffffff' text color on top of accent
tertiaryTextColor string '#fd4741' accent text color
accentBackgroundColor string 'linear-gradient(45deg, #e61e68 0%, #FD4741 100%)' accent background color
borderRadius string '.35em' the border radius size
dropShadow string '0 0 2.5em rgba(0, 0, 0, 0.1)' Date Picker drop shadow
dateRangeBackgroundColor string 'rgba(0, 0, 0, 0.05)' background color between date ranges
Tutorial Coming Soon!

Check Browser Support

Interactive Table

A beautiful themeable date picker / calendar with plenty of useful options. Supports several languages, date ranges and much more.

Clone Project
Documentation
Author:
Status:
Deprecated
New
Updated
Latest Version:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor