Foundation 5 Datepicker failing, or is it me

Question

OK, I am running FOundation 5 with SASS I downloaded the Datepicker by Peter Beno here:

https://github.com/najlepsiwebdesigner/foundation-datepicker

Now I know that it says it is made for Foundation 4, but I see no reason why it won't work in Foundation 5. Yeah the javascript is a bit over my head, but that it why I'm using someone elses date picker.

Here are the steps I took to implement this datepicker into Foundation 5.

1) I renamed the foundation-datepicker.js to foundation.datepicker.js and included it into the JS bundle. My page is now loading this script.

2) renamed foundation-datepicker.css to _datepicker.scss and included it in the sass folder. It is now being sucked into my minified css file, i checked.

I then used this code on my page:

    @Html.TextBoxFor(model => model.StartedDate, new { type = "text", id = "dp1", @class = "span2" })

Which outputs from asp.net mvc to this:

    <input class="span2" id="dp1" name="StartedDate" type="text" value="1/1/1981 12:00:00 AM" />

Also I added this after the call to jQueryui

    <script type="text/javascript">
    $('.datepicker').fdatepicker()
    </script>

Here is the docs page, which I would update and make more clear for the guy if he can help me get this working in Foundation 5.

http://foundation-datepicker.peterbeno.com/example/example.html

And I tested it in Mozilla to avoid Chromes crappy datepicker. What am I doing wrong. Is it most likely conflicting with Foundation 5. Is there another datepicker somewhat similar I can use that is jQueryUI based that doesn't suck.

Answer 1

I've tried Peter's UI implementation, and I've had trouble as well, so I built my own interface for Date and Time picking for Foundation. It's a little fresh, but my company has been using it on a production site and it's holding up.

https://github.com/jockmac22/foundation_calendar_date_time_picker

I built it around unobtrusive javascript, so its easy to implement through data- attributes in the input field.

I have an SCSS file you can include in your foundation SASS build to incorporate the required CSS directly into your final CSS file. This way you can customize the coloring with your existing foundation settings, and make any other changes easily inside the SASS framework.

It supports custom date, time and field value formats so you can have a user friendly display of the date and time, with an ISO standard (or any other format) as the final value stored in the field. I used the Ruby strftime formatting options as the basis for the date formats.

Let me know your thoughts if you decide to try it.

Answer 2

In your answer you invoke fdatepicker with:

<script type="text/javascript">
$('.datepicker').fdatepicker()
</script>

But class .datepicker in missing in your generated HTML

<input class="span2" id="dp1" name="StartedDate" type="text" value="1/1/1981 12:00:00 AM" />

Isnt that the problem? If you invoke fdatepicker on empty element set, you cant see any output. If there are problems with UI, please open an issue with description/screenshot on datepicker Github repo. https://github.com/najlepsiwebdesigner/foundation-datepicker

Thanks!

EDIT: Foundation datepicker now fully supoorts F5, and we still provide F4 version under releases tag.