Date Picker in Fullscreen by castlecode

Thank you for purchasing this plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thank you!

These are all the files you need to import in your page so the plugin can work.

<!-- Style of the plugin -->
<link rel="stylesheet" href="../plugin/components/bootstrap-datepicker/bootstrap-datepicker3.min.css">
<link rel="stylesheet" href="../plugin/datepicker-in-fullscreen.css">


<!-- jQuery 1.8+ -->
<script src="plugin/components/jQuery/jquery-1.11.3.min.js"></script>


<!-- Plugin JS file -->
<script src="../plugin/components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="../plugin/components/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js"></script> <!-- spanish language (es) -->
<script src="../plugin/components/moment/moment.min.js"></script>
<script src="../plugin/components/TouchSwipe/jquery.touchSwipe.min.js"></script> <!-- Only if touchswipe is enabled -->
<script src="../plugin/datepicker-in-fullscreen.js"></script>

It’s not required, but I recommend placing the CSS files in <head> and the JavaScript files and initialization code in the footer of your site (before the closing </body> tag). If you already have jquery.js on your site, don’t include it a second time.

This is the default HTML input used by the plugin, notice how it is hidden, the plugin will populate the output of the datepicker to this hidden input, and visually it will create a "fake input" that will trigger the datepicker.

<input id="example_1" type="hidden" placeholder="Click Me">

Heads up! you can style the "fake input" anyway you want with CSS.

If you don't want to use the previous hidden input, and rather use a normal visible text input field, you can do so as follows:

<input id="example_1" type="text" placeholder="Click Me">

And don't forget to turn off (false) the fakeInput option

Heads up! I wouldn't recommend a normal visible text input field. Because if you are on a touch device (a phone or tablet) and click on a "visible" input your device will open the native keyboard and center the input in the viewport, and that's not neccessary or useful for the plugin.

Once you got the HTML markup in your site you need to initialize the plugin in Javascript.

You need to take the id from the input text field (In the example above would be: id="example_1") and use it for the initialization.

<script>
    
    $('#example_1').datepickerInFullscreen(); 
    
</script>

And here is where you can pass all the options available. For example:

<script>
    
    $('#example_1').datepickerInFullscreen({
        format               : 'YYYY-DD-MM',
        fakeInputFormat     : 'YYYY-DD-MM',
        datepicker          : { startView : 1, /* start in months (1) */ }
    }); 
    
</script>

You can see all the options available here

Here you can see all the JS options available for the plugin.

Option	Type	Default	Description
`touchSwipe`	boolean	true	Activate or deactivate the swipe support for changing months/years
`effect`	string	'3'	It could be '1' or '2' or '3' and so on until '16'
`blockScroll`	boolean	true	When the modal opens the plugin will try to remove the scrollbar and add a margin-right to the page in order to compensate for it, but you can deactivate this
`closeOnChange`	boolean	true	Automatically close the modal when selecting a date
`format`	string	'MMMM DD, YYYY'	The format for the input text field (the hidden input)
`format`	string	'MMMM DD, YYYY'	The format for the input text field (the hidden input)
`additionalTarget`	string	''	If you want to populate the output of the datepicker to an aditional HTML element (like a div or a span) you can do so by specifying the selector here (for example: .my_date or #my_date)
`additionalTargetFormat`	string	'MMMM DD, YYYY'	The format for the additional target, it could be totally different from the text input field
`fakeInput`	boolean	true	If true it will create a "fake input"
`fakeInputFormat`	string	'MMMM DD, YYYY'	The format for the "fake input", it could be totally different from the text input field
`todayWord`	string	'Today	The today word
`clearWord`	string	'Clear	The clear word
`closeWord`	string	'Close	The close word
`template`	string		The template of the datepicker, you can use it to add a class or maybe add some icons
DATE PICKER OPTIONS
`calendarWeeks`	boolean	false	Show the calendar weeks number
`datesDisabled`	array	[]	Array of date strings or a single date string which will be disabled, formatted in the given date format
`daysOfWeekDisabled`	array	[]	Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: disable weekends: [0,6].
`daysOfWeekHighlighted`	array	[]	Days of the week that should be highlighted. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example: highlight weekends: [0,6].
`startDate`	date	-Infinity	The earliest date that may be selected; all earlier dates will be disabled.
`endDate`	date	Infinity	The latest date that may be selected; all later dates will be disabled.
`maxViewMode`	number	2	Set a maximum limit for the view mode.Accepts: 0 as “days” or “month”, 1 as “months” or “year”, 2 as “years” or “decade”, 3 as “decades” or “century”, and 4 as “centuries” or “millenium”. Gives the ability to pick only a day, a month, a year or a decade.
`minViewMode`	number	0	Set a minimum limit for the view mode.Accepts: 0 as “days” or “month”, 1 as “months” or “year”, 2 as “years” or “decade”, 3 as “decades” or “century”, and 4 as “centuries” or “millenium”. Gives the ability to pick only a day, a month, a year or a decade.
`startView`	number	0	The view that the datepicker should show when it is opened. Accepts: 0 as “days” or “month”, 1 as “months” or “year”, 2 as “years” or “decade”, 3 as “decades” or “century”, and 4 as “centuries” or “millenium”. Useful for date-of-birth datepickers.
`language`	string	'en'	The language to use for month and day names. If an unknown language code is given, English will be used. You must include the language JS file so this works.
`templates`	object		Here you can change the arrows.
`title`	string	''	Here you can add a title to the datepicker (it will show up on top).
`todayHighlight`	boolean	false	If true, highlights the current date.
`weekStart`	number	0	Day of the week start. 0 (Sunday) to 6 (Saturday).
EVENTS
`beforeOpen`	function	function(modal, settings){}	This event is triggered before the modal shows up.
`beforeClose`	function	function(modal, settings){}	This event is triggered before the modal closes up.
`onChange`	function	function(modal, settings){}	This event is triggered when the date changes.

You can pass all the options to the datepickerInFullscreen JS function like this (these are the default values)

<script>
    
    $('#example_1').datepickerInFullscreen({
        
        // Options

        touchSwipe                  :   true,
        effect                      :   '3', // 1 or 2 or 3 or 5 or 6 up to 16
        blockScroll                 :   true,
        closeOnChange               :   true,
        format                      :   'MMMM DD, YYYY', // YYYY-MM-DD
        additionalTarget            :   '',
        additionalTargetFormat      :   'MMMM DD, YYYY',
        fakeInput                   :   true,
        fakeInputFormat             :   'MMMM DD, YYYY',
        todayWord                   :   'Today',
        clearWord                   :   'Clear',
        closeWord                   :   'Close',
        template                    :   ' <div class="datepicker-in-fullscreen-modal"> ' +
                                            ' <div class="datepicker-in-fullscreen-content"> ' +
                                                ' <div class="datepicker-in-fullscreen"></div> ' +
                                                ' <div class="datepicker-in-fullscreen-controls"> ' +
                                                    ' <a class="dpifs-today">{{today}}</a><a class="dpifs-clear">{{clear}}</a><a class="dpifs-close">{{close}}</a> ' +
                                                ' </div> ' +
                                            ' </div> ' +   
                                        ' </div> '+
                                        ' <div class="datepicker-in-fullscreen-background"></div> ',

        // Datepicker options

        datepicker                  :   {
                                            calendarWeeks               :   true,
                                            datesDisabled               :   [],
                                            daysOfWeekDisabled          :   [],
                                            daysOfWeekHighlighted       :   [],
                                            startDate                   :   -Infinity,
                                            endDate                     :   Infinity,
                                            maxViewMode                 :   2, // centuries
                                            minViewMode                 :   0, // days
                                            startView                   :   0, // days
                                            language                    :   'en',
                                            templates                   :   {
                                                                                leftArrow: '«',
                                                                                rightArrow: '»'
                                                                            },
                                            title                       :  '',
                                            todayHighlight              :  false,
                                            weekStart                   :  0, // sunday
                                        },

        // Events

        beforeOpen                  : function(modal, settings){},
        beforeClose                 : function(modal, settings){},
        onChange                    : function(modal, settings){},  

    }); 
    
</script>

You can navigate to this folder: plugin/components/bootstrap-datepicker/locales and find your language file, then import it into your page, for example the file for spanish language would be this one:

<script src="../plugin/components/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js"></script> <!-- spanish language (es) -->

Then you need to pass this new language in the JS initialization, as follows:

<script>
    
    $('#example_1').datepickerInFullscreen({
        datepicker      : { language : 'es' },
    }); 
    
</script>

You can also open that file and customize the translation

Date Picker in Fullscreen by castlecode

Including files

HTML

Initializing

Options

Language