Date Picker doesn't look right.

I added a date picker field to a form and it doesn't look right.

[attachment=0]datepicker.jpg[/attachment]

I read the thread on customization, but I'm not doing any of that. So, I'm assuming it should display correctly without any tweaking. I've tested in in FF, IE, and Chrome. It looks the same on FF and Chrome. It doesn't display at all on IE. Here's a link to the form: http://www.walkerreid.com/index.php?option=com_content&view=article&id=86&Itemid=159

I'm on Joomla! 1.5, using CF V4,RC2, running FF7 for Windows.

Any help would be greatly appreciated.

Jose

thats a css issue. your site template has some settings overriding the CF stuff

you will likely need to add/edit fontsize and padding of the respective CF css classes/ids

Hi Jose,

As Gabriela says, there are settings in your template.css that are overriding the datepicker CSS for the title class. If you fix these by adding more specific CSS then the claendar looks OK.

Bob

Hi guys, thanks for the replies!

I am not a programmer and know very limited CSS. Bob, what did you add (I assume you tested with Firebug) to the CF CSS to make the calendar look like your example?

Could the error be because I set the form to "tight" spacing?

I appreciate your help in advance.

Jose

Hi Jose,

Pretty much the CSS that Gabriela mentioned. Try putting this into a Load CSS action in the On Load event

div.datepicker_dashboard .title {
  font-size: 100%;
  padding: 0px;
}

It's nothing much to do with the 'Tight' layout, just that both the datepicker and the template use the 'title' class.

Bob

Thanks Bob! Almost there!

Take a look at it. The M T W TH F S line is still too big. I tried changing the font size to 80% but that didn't do it. Any suggestions?

Jose

use firefox with firebug addon installed to identify what needs editing

Hi Jose,

Sorry my typo - it should be font-size (not font_size).

Bob

Geez Bob, I can't deal with this kind of unreliability. LOL!!!! JUST KIDDING!!!!!!!!!

THANK YOU SIR! That was it. It's perfect!!!! As always, I sincerely appreciate your help and the outstanding performance of Chronoforms.

Have a great weekend!

Jose

Hi there, first is to congratulate you for the great tool!
I recently used Chronoforms on a website and it's a perfect solution. However I have a problem as my Calendar seem to appear at the edge of the screen, instead of appearing next to the button. See attachment, kindly assist. Thanks again.

Hi karangi ,

Please check the CSS that is being applied to the calendar div - most likely something in the template CSS is causing this.

Bob

Hi again,
Thanks for your help. I found the problem and it was indeed in the CSS of a module am using called gk_tab which has a line:

div.gk_tab_container1-style4 {
    overflow: hidden;
}

But there is no way I can suppress this line as it distorts the page. Is there anything u can suggest? Thanks.
URL: http://www.olarrokenya.com/contact-us

Hi karangi ,

You need to add some more specific CSS in a Load CSS action. You can do this by using the datepicker divs as a selector and/or using the !important attribute.

Bob

Hi Bob,

Is it possible to manually override the datepicker? Also I do I get to display the calendar icons to manually display the datepicker? as per karangi's picture above.

Basically I would like a user to tab through the form and manually type a date in the format d-m-Y but if they want, they could click the Calendar icon and use the datepicker.

How do I achieve that?

At present the datepicker shows automatically when I am in the field and I cannot type anything in the field. I can copy and paste but if I do the date recorded in the database is 0000-00-00.

Thanks,
Adri

Hi Adri,

If this is ChronoForms v4 then the datepicker doesn't show an icon by default and doesn't appear to allow manual input either - this is probably because the validation of manually entered dates is difficult to get right.

I see that the MonkeyPhysics version has a Toggle by Element option that you could use (see the docs here), that seems to show the icon and allow manual input.

For the MooTools DatePicker introduced as an option in CFV3.2 it looks as if you could use the Picker Attach methods to do something similar but I can't see an example.

Options:

toggle: (element, string, array) A collection of elements which will toggle the picker when such a link is clicked.
togglesOnly: (*boolean, defaults to true) If the toggle option is set, this option determines if the focus/blur events on the input fields are still added as well.
blockKeydown: (boolean, defaults to true) Whether it should block keydown events, so the user can type into the input field or not.

Bob

Hi again Bob,

And thank you for your prompt reply.

I am wondering if a validation as date could have also have been left in Text Box element to solve this issue in future. The datepicker is a nice addition but we also need to offer the option to enter the dates manually.

Is there a way to use a Text Box field validated as an AlphaNumeric to enter a date? and if so how would I setup the input format to match d-m-Y ?

Thanks,
Adri

Bob,

I have tried using a Text Box element validated as AlphaNum to enter a date and this works fine.

The only issue I have left is that to make this work the date needs to be entered as Y-m-d

How can I change it so that the user can type it as d-m-Y and it gets properly recorded in the database?

Thanks,
Adri

Hi Adri,

You'll need to write a custom validation to check that the input is valid; and then add Custom Code after the form is submitted to get the date in the correct format to save in a database table (if that is what you need).

Bob

Ok Bob,

The logic is all clear. Can you please point me to a some threads where I can see some examples of

1) Custom Validation on input
2) Custom Code after submit

They do not need to be date specific, of course better if they are, just explaining the processes. In particular the point 2, as this is the one I need more urgently.

I am assuming that I will need to ....

1) place the php code inside Custom Code - Before email
2) the code will need to load the currently stored value with $cf_birthdate = $form->data['cf_birthdate'];
3) then I will need to adjust the $cf_birthdate value from d-m-Y to Y-m-d
4) and finally I will need to reload the new value in the $form->data['cf_birthdate']

This last point 4 is where I would like to see a command/example on how to define a new value into $form->data['cf_birthdate']

Your overall feedback will be greatly appreciated.

Thanks,
Adri

Bob, I am thinking something on these lines

<?php

// Collects the entered values by the users in d-m-Y format 
$ent_date_1 = $form->data['cf_cd_birthdate']; 
$ent_date_2 = $form->data['cf_cd_dischargedate']; 

// Adjusts the dates values into variables with the MySQL Y-m-d format 
$adj_date_1 = date('Y-m-d', strtotime($ent_date_1));
$adj_date_2 = date('Y-m-d', strtotime($ent_date_2));

// Resets the form values to the newly modified date formats
$form->data['cf_cd_birthdate'] = $adj_date_1; 
$form->data['cf_cd_dischargedate'] = $adj_date_2;

?> 

Care to comment on the last 2 lines of the code please?

Thanks,
Adri

Yes, I can confirm, that code seems to be doing the job! 😀