Channel Form - date picker not working
Development and Programming
I’m trying to output a Date field in a Channel Form, but the date picker isn’t working. It’s just giving me a text field. EE 3.3.2
<input type="text" name="entry_date" id="entry_date" value="{entry_date format="%n/%j/%Y"}" class="ee_datepicker text field" />I have already included the Channel Form CSS include in the HTML Head
<link rel="stylesheet" type="text/css" href="{path='css/_ee_channel_form_css'}" media="screen">
Did you include include_assets="yes" in your {exp:channel:form} tag?
I haven’t, but that’s supposed to be set to ‘Yes’ by default. I’ve just tried including that parameter, but it didn’t make a difference.
Oh dear, that’s an error in our docs. It defaults to ‘No’. I’ll get those docs adjusted.
Since you added it do you have any errors in your JavaScript console? That could prevent the datepicker from showing.
I’ve now added the include_assets=”yes” and there are no errors showing in the Javascript Console.
So, I’ve just done a ‘little’ test. I have created the same Template on an EE 2.11.1 and on an EE 3.3.2 installation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html >
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="{path='css/_ee_channel_form_css'}" media="screen" />
</head>
<body>
{exp:channel:entries channel="properties"}
{exp:channel:form channel="{channel_short_name}" entry_id="{entry_id}"}
<input type="text" name="entry_date" id="entry_date" value="{entry_date format="%n/%j/%Y"}" class="ee_datepicker text field" />
{/exp:channel:form}
{/exp:channel:entries}
</body>
</html>EE2 = datepicker displays nicely. EE3 = datepicker doesn’t display, whether I use include_assets=”yes” or not.
Hi Oliver,
You’ll need to add a rel="date-picker" to your text input. That should fix it.
That’s got it working, thanks. 😊
It seems that Bootstrap breaks the styling a little though (see screengrab) and there is no icon in the Input field, to show that there is a Date Picker popup available, like there is in EE2.
Hey there, I have a similar issue going on with my site. I’ve followed all the suggestions here which seem to mostly resolve your issues but I’m still having issues with mine… I have a post on the “How do I” forums about this … would you be able to shed any light on what I may have wrong?
Glad to see your’s is working right.
Russ