1

I'm trying to use the low events fieldtype within a Channel Form for users to submit events. If I use the field shortname {field:myfieldname} it works fine, but I am trying to customise the look of the fields/datepicker, mainly because the form is responsive and the EE styled datepicker breaks the design.

I have tried the same approach as what I would normally do with matrix, and have seen what HTML is outputted by the field.

<div id="low-events-120" class="low-events low-all-day" data-time-format="eu" data-time-interval="60" data-lang-decimal="." data-lang-mins="mins" data-lang-hr="hr" data-lang-hrs="hrs">
<input type="text" name="event_date[start_date]" value="2014-03-23" class="date start-date hasDatepicker" maxlength="10" id="dp1393520784651">
<input type="text" name="event_date[start_time]" value="" class="time start-time ui-timepicker-input" autocomplete="off">
—
<input type="text" name="event_date[end_time]" value="" class="time end-time ui-timepicker-input" autocomplete="off">
<input type="text" name="event_date[end_date]" value="2014-03-23" class="date end-date hasDatepicker" maxlength="10" id="dp1393520784652">
<label><input type="checkbox" name="event_date[all_day]" value="y" checked="checked"> All Day</label>

Now I have changed the class in order to target a different datepicker (using pickadate.js) and this works but it would not save the dates/times, so I'm not sure what else I would need to change? Presumably the values?

Also, I do not need an input for the end date/time as I only want the user to enter a single date and start time.

Any pointers on this would be greatly appreciated! Thanks!

1

Low Events expects the format of the both start date and end date to be YYYY-MM-DD. They both must be submitted. Also, the end date must be equal to or greater than the start date. The native JS (and styling) automatically changes the end date when the start date is modified. If you remove the class names, this check won't fire, so you'd have to do that yourself. You could hide the end date fields using display:none so the fields are submitted, but just not shown.

If you make sure these conditions are met, the values should be saved correctly.

| improve this answer | |
  • Ok thanks for that. I have got the date picker submitting the date correctly, I didn't realise the end date had to still be in there. What should I be putting as the initial value? If I leave it blank then it doesn't keep the value if something else on the form doesn't validate and its refreshed. Also where does the date ID get generated from? – shorn Mar 1 '14 at 9:48
  • Yeah, that's why the JS that comes with it changes the end date when the start date is modified. If you're not using it, you'll have to find a way to do it yourself... And what do you mean by "date ID"? The id="low-events-120" attribute is generated based on the field ID. – Low Mar 1 '14 at 10:27
  • Sorry, wasn't explaining myself too well! I've gone with hiding the fields for now. The only other issue I am having is the timepicker is not showing within the channel form. Fine in CP, but just appears as a text field in front end. – shorn Mar 2 '14 at 21:30
  • Changing the default markup (input classes) will do that, yes. Either leave the markup intact and override the default CSS/JS, or change it and customize the inputs yourself. – Low Mar 3 '14 at 7:49
  • The time picker failed to show when I hadn't changed the markup. No js errors on page preventing it either? – shorn Mar 3 '14 at 13:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.