WeStandWithUkraine

83 Posts
modernmagic
7 years ago
Topic

My client does not like the "Calendar Field".

They prefer a either a input type="date" OR <select> for 1-12, 1-31, 1900-2xxx.


How do I set up a select pulldown field to be stored in the user birthdate?


Regards,

Jeff

Get a Book for SEBLOD
83 Posts
modernmagic
7 years ago
4
Level 1

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

233 Posts
pepperstreet
7 years ago
3
Level 2

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.

83 Posts
modernmagic
7 years ago
2
Level 3

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

233 Posts
pepperstreet
7 years ago
1
Level 4

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!?
 

7 years ago
0
Level 5

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

572 Posts
_jrmo
7 years ago
1
Level 1

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

83 Posts
modernmagic
7 years ago
0
Level 2

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

43 Posts
Jan
7 years ago
3
Level 1

Hi all,

Interesting idea using SD Concat plugin for date fields day, month, year. This way you can store de date in the database, but you can not use those fields to display the date, storage none! For content items no problem, but the user can not edit the date. In Admin and Site Forms this method is not useful.
I have used Combodate with succes. It is not difficult.
Load moment.min.js, combodate.js and locales.js in your template just before .


locales.js is required for languages other than English. This is a big file, but you can simply remove all the languages that are not needed.

Create a text field and add:
data-format="YYYY-MM-DD" data-template="D MMM YYYY"
to Custom Attributes (below the yellow arrow), and:
$(function(){
$('#user_birthdate').combodate({
minYear: 1925,
maxYear: 2015,
customClass: "inputbox form-control"
});
});
moment.locale('de');

to Script (JS).

233 Posts
pepperstreet
7 years ago
2
Level 2

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?

43 Posts
Jan
7 years ago
1
Level 3

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

43 Posts
Jan
7 years ago
0
Level 4

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.

572 Posts
_jrmo
7 years ago
4
Level 1

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

7 years ago
0
Level 2

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

83 Posts
modernmagic
7 years ago
1
Level 2

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


572 Posts
_jrmo
7 years ago
0
Level 3

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

7 years ago
0
Level 2

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

Get a Book for SEBLOD