An Easy To Use Configurable DatePicker For Formit

115 Posts

jimmyjazz Reply #1, 8 years, 8 months ago

This is not an extra but an external date picker that just sits well.

After searching around on the forums I couldn't find an easy to use DatePicker to go with Formit.
I tried quite a few date pickers but I either couldn't get them to function with formit or get the css to display them nicely.

I just want to share an easy to use 'Datepicker' that functions very well with Formit.

This date picker can be found here:

http://mugifly.github.io/jquery-simple-datetimepicker/

It can be configured very easily, I disabled the time picker as it was not required for what I wanted.

Required files:

jquery.simple-dtpicker.js
jquery.simple-dtpicker.css

Here's the code I placed in a chunk;

<h4>Select Collection Date</h4>
		<div class="datepicker">[[!DatePicker]]<input type="text" id="datepicker" name="datepicker" value="">
		<script type="text/javascript">
			$(function(){
				$('*[name=datepicker]').appendDtpicker({
					"dateOnly": true,
					"dateFormat": "DD-MM-YYYY",
					"futureOnly": true
				});
			});
		</script>

Very easy to use & implement.
There are many configuration code examples on their website, the above was just the functionality I required
fyi.....I have no affiliation whatsoever with this datepicker.
Enjoy

90 Posts

faolie Reply #2, 7 years ago

Thanks! Just what I was looking for.

David Heriot
pfsmedia

34 Posts

bendy4 Reply #3, 6 years, 11 months ago

@jimmyjazz or anybody else who can help...

Can't get this to work in formit.
This is my field in formit :

<div class="form-group has-error datepicker"><label for="afhalen">Afhalen op: </label> <span class="label label-danger error">[[!+fi.error.afhalen]]</span><br /> <input id="afhalen" class="form-control required"  name="afhalen" value="[[!+fi.afhalen]]" /></div>

and then this :

<script type="text/javascript">
            $(function(){
                $('*[name=afhalen]').appendDtpicker({
                    "dateOnly": true,
                    "dateFormat": "DD-MM-YYYY",
                    "futureOnly": true,
		    "firstDayOfWeek": 1,
		    "locale": "nl",
		    "closeOnSelected": true
                });
            });
</script>

The .css en .js is loaded, but nothing happens when I click the field...

Looks like you use a snippet in your example chunk ? I see

[[!DatePicker]]

in your code.

Anyone can help ?

184 Posts

flanger Reply #4, 6 years, 11 months ago

Thanks! Works great!

Quote from: bendy4 at May 11, 2017, 10:02 AM

@jimmyjazz or anybody else who can help...

The .css en .js is loaded, but nothing happens when I click the field...

Looks like you use a snippet in your example chunk ? I see
[[!DatePicker]]
in your code.

Anyone can help ?

The Datepicker snippet is not necessary - i can use the script like this:

<input type="text" class="form-control" id="datepicker" placeholder="Reisedatum" name="datepicker" value="">
        <script type="text/javascript">
            $(function(){
                $('*[name=datepicker]').appendDtpicker({
                    "dateOnly": true,
                    "dateFormat": "DD.MM.YYYY",
                    "futureOnly": true,
"autodateOnStart": false,
"locale": "de"
                });
            });
        </script>

Maybe you need to check the output of your javascript console to see whats missing...

https://www.beautyislife-shop.de - premium make-up!
https://www.topsterne.de - sell it here!
---------------------------------------------------------

34 Posts

bendy4 Reply #5, 6 years, 11 months ago

Did some testing and tried to find what was wrong by checking the console, but can't find it.

I see things loaded as follows :
- css
- jquery 1.11.3 via cdn
- datapicker specific js file

then comes a formit form with the last field as :

<div class="form-group has-error"><label for="afhalen">Afhalen op: </label> <span class="label label-danger error">[[!+fi.error.afhalen]]</span><br /> <input id="afhalen" class="form-control required"  name="afhalen" value="[[!+fi.afhalen]]" size="50" /></div>

and also at the end of the page :

<script type="text/javascript">
            $(function(){
                $('*[name=afhalen]').appendDtpicker({
                    "dateOnly": true,
                    "dateFormat": "DD.MM.YYYY",
                    "futureOnly": true,
"autodateOnStart": false,
"locale": "nl"
                });
            });
</script>

But nothing happens when I click the field on the page.

Anyone ??