Dear Anyone :-)

I'm suprised everyone is content with the Calendar field.  

Lucky for you, but my client would like a pulldown like what is typical for a credit card expiration date. :-)

https://www.dropbox.com/s/pbq1q2erzdx8wq1/Screenshot%202015-07-20%2009.48.01.png?dl=0

But with the addition of a Day pulldown so that we can get the whole Birthdate.

Thanks,

Jeff

I agree with you! ;) The calendar is very limited and outdated (as much as the good ol' Joomla core one!).

IMHO, it should be replaced by a modern, versatile version. Mobile-friendly. At least it should have different input methods/styles. Incl. the super simple select field variant.

Pepperstreat,

I would typically do this with RSForms but I was hoping to stick to Seblod for my Registration Form.

Do you have any idea where to start?

Regards,

Jeff

Hello, currently I don't have the free time to dig any deeper, sorry. I believe, I remember a topic from user "designbengel", where a better date input was a client request, too. Maybe she can help out with a solution, or at least some tips in that direction!?
 

Hello! No, sorry i don´t have further input but still need an alternative calendar. I´m looking for folowing features: conditional states for calendar field. When selecting first date, the second datefield must be min. +3 Days after the second one, open Datepicker also by clicking inside the input field, no animation and better style, very important: really multilanguage: on english site in english, on german site in german but still should work with the bookings in the background. Looking forward to a tutorial :) 

Cheers, Elisa

Hi Jeff,

Purchase and install the SD Concat plugin

Create your dropdown fields for your date (a numeric field from 1 - 31 for the day, a simple select for the months, and another numeric field for your year selection). All of these fields should be storage > none.

Create a new SD Concat field with datetime storate formatting. In the setup, concat your 3 fields in the order Year, Month, Day. Your syntax for the SD Concat field will need to be something like #year_field#||[-]||#month_field#||[-]||#day_field#

That should do the trick.

Anyone else looking for a better calendar plugin, it's actually really easy to implement with any third party javascript plugin. If you load a datepicker js file in your template, you can create a text field with datetime plugin and make it all work together. I'll look to do a tutorial on this soon.

James

Dear James,

Before I purchase the plugin and get started, do you personally recommend the SD Concat method or the Javascript Plugin?

I found this one in a quick search:  http://vitalets.github.io/combodate/

Regards,

Jeff

Great infos, Jan! 

BTW, I can see multiple screenshots in my topic's email notification, but online there is nothing!? Except for a missing image icon. Any clue?

Hi pepperstreet,

Yes, I inserted 2 images with copy and paste. Obviously hat is not the way. I try it again:

Image 1, showing where to insert the code

Image 2, dropdown datepicker in action

There was more text in my message:

#user_birthdate points to the id of the text field,
customClass: form-control is added for Bootstrap 3; my css file needed two extra declarations:
.day, .month, .year { float: left; }
.day option, .month option, .year option { text-align: center; }
to get all in place.
That's it.

But.......... unfortunately that is not all! 

In my Site and Admin form the date saved in the database is not displayed in the datapicker fields. I have found why Combodate can not display the date. The type of the field user_birthday is set to DateTime. That means not only the day, month and year are to be displayed but also hour, minute and seconds. There is no place for that. When I set the type to Date, it works. Setting the type of the field to Date is not possible in Seblod, you have to do that in PhpMyAdmin.

The JS files are a bit to big. I am still looking for a more lightweight datepicker.

Jan

Till now I have tried jquery.date-dropdown.js and jquery-dropdate.js, both lightweight. They were not functioning properly so I stick with combodate.

Typo DateTime of the date field is no problem if you use: 

data-format ="YYYY-MM-DD HH:mm:ss"
in Custom Attributes.

Option:
maxYear: moment().format('YYYY') returns the current year as maximum year,
maxYear: moment().add(1,'y').format('YYYY') returns next year as maximum year,
firstItem: "name" puts Day, Month and Year in the input boxes.

Combodate.js minified is about 6KB, locales.js for one language minified about 3KB and moment.min.js about 34KB. Maybe someone is able to get rid of unnecessary functions in moment.js with Grunt. The author has made it possible, I am not (yet) able to do that.
For the moment I can live with it. I have added the js files to my Site and Admin templates and for my needs it works fine.

Hi people,

I've added a tutorial here for using a third-party plugin as a different method for adding datepickers to your site.

http://jamesmorrell.com/blog/seblod-datepicker-calendar

Elisa, you may want to try implementing this one, using the same principles. http://demos.telerik.com/kendo-ui/datepicker/index

This one lets you do the start-date limiting that you were asking about by adding some javascript on the second field of your date range.

James

Hello James, that´s awesome thank you! I´ll try that tomorrow... thanks a lot!

Dear James,

I can't wait to try this out! Thanks!!

Please confirm that I can use your tutotial to implement a dropdown date picker instead like this one: http://vitalets.github.io/combodate/  

It appears that I can....

Thanks

Jeff

Hey Jeff,

Yes you can. If you look up a bit in this thread, you'll see that Jan did exactly that.

@Elisa, I'm glad it helped! 

Cheers,

James

James i followed your tutorial and it worked live heaven. THANKS SO LOT !!!