Date picker stylesheet not rendered

[tomvanenckevort]

After upgrading a site to Umbraco Forms v7.0.6 I encountered an issue with the date picker stylesheet (for Pikaday) missing from the page.

This happens when you not render the scripts with the form, but elsewhere on the page (as described here).

Reproduction

Create a form and make sure it includes a date picker field.

Insert a form in a view using the macro script, making sure to exclude the scripts:

@Umbraco.RenderMacro("renderUmbracoForm", new { FormGuid = Model.Form, FormTheme = "default", RecordId = Guid.Empty, ExcludeScripts = "1" })

(in this case Model.Form contains the GUID of the form, but you can also hardcode it for testing purposes).

Next up, render the form scripts further down the page:

@if (TempData["UmbracoForms"] != null)
{
    foreach (var form in (List<Guid>)TempData["UmbracoForms"])
    {
        Html.RenderAction("RenderFormScripts", "UmbracoForms", new { formid = form, theme = "default" });
    }
}

View the page and when highlighting the date picker you will notice all the styling is missing.

Bug summary

The issue is that the pikaday CSS is no longer included on the page. I noticed that the way it's added has changed in this latest version, using:

Html.AddFormThemeCssFile("~/App_Plugins/UmbracoForms/Assets/pikaday/pikaday.css");

(line 12 in Views\Partials\Forms\Datepicker.cshtml)

But then it's not rendered out anywhere.

Workaround/fix

I managed to fix it by modifying Views\Partials\Forms\Themes\default\Script.cshtml:

@* Render references to javascript files needed by fields on the current page*@
if (Model.UseClientDependency)
{
    foreach (var css in Html.GetThemeCssFiles(Model))
    {
        Html.RequiresCss(css.Value);
    }

    foreach (var script in Html.GetThemeScriptFiles(Model))
    {
        Html.RequiresJs(script.Value, Model.JavaScriptTagAttributes);
    }
}
else
{
    @Html.RenderFormsStylesheets(Url, Model)

    @Html.RenderFormsScripts(Url, Model, Model.JavaScriptTagAttributes)
}

(this is from line 41 in that file)

This fixes the issue and makes sure the Pikaday CSS does get loaded on the page.

[bergmania]

PR: https://github.com/umbraco/Forms/pull/234