Hi Andand,

There's documentation that will help you with creating a custom field type:

https://our.umbraco.com/documentation/add-ons/umbracoforms/developer/Extending/

I hope this helps.

Hi Breden,

I have created custom field control class in C# as per link

https://our.umbraco.com/documentation/add-ons/umbracoforms/developer/Extending/Adding-a-Fieldtype

Then I am creating Partial view which has sample angularJS inside. but I am getting "angular not defined". Is there something wrong in referencing Umbraco angular module. What I need to do to make code work ? Since I am getting angular error, I have reference angularJS seperately. Is this correct way working with Umbraco and AngularJS.

{ @model Umbraco.Forms.Mvc.Models.FieldViewModel @{ string val = Model.Values.LastOrDefault()?.ToString() ?? string.Empty; if (Model.ValueAsObject != null && !Equals(Model.ValueAsObject, string.Empty)) { try { DateTime d; d = (DateTime) Model.ValueAsObject; val = d.ToShortDateString(); } catch { //ignore } } }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>





<script>
    angular.module("umbraco").controller("myPluginController", function ($scope) {
        $scope.addOnClick = function (test) {
        $scope.control.value.push({ topText: $scope.topText, botText: $scope.botText });
        $scope.topText = "";
        $scope.botText = "";
    }
});

{

} }

Angular is only available on your website if you include it.

Umbraco uses AngularJS in the back office (admin) area. In the link I sent you'll see Angular isn't referenced anywhere.

I'm not sure what you are trying to do with Angular and whether it is needed?

Hi Breden,

I have requirement to include Date picker control as custom field in Umbraco forms. So, Existing date picker has to be extended with some javascript functionality (JQuery or Angular or Vue). Sample as per link below

https://material.angularjs.org/latest/demo/datepicker

Now, I am facing error with AngularJS first line (angular not defined). So any guidance on

1. How to develop custom field type with AngularJS controls
2. Is there any date range picker in Umbraco ?
3. There is already umb-date-time-picker control available in back office which uses umbraco angular model. But not sure how to integrate it with Custom field type.
4. How to include AngularJS on non-backoffice features (though back office is technically asp.net route in same web site)

Thanks,

Anand Bhopale

1. I'm not sure
2. Have a read at this - https://our.umbraco.com/documentation/Add-ons/umbracoforms/editor/creating-a-form/fieldtypes/Date/
3. It's generally not recommended to try and use back office components on the website front end
4. Just as you would for a normal AngularJS project, although AngularJS will lose support soon and there is probably a better way.

It seems like JQuery or AlpineJS would be a better fit for what you're trying to do if #2 above doesn't work out for you.

Thanks Brendan for your help.

As per link, I can see Pikaday calendar (js and css) is included in Form Asset folder.

Also, I found one more library under Umbraco/asset for Calendar/DatePicker being used called "BaremetricsCalendar". I am not sure whether is documented in Umbraco on how to use it, but then there is documentation available on

https://github.com/Baremetrics/calendar

So, I think I can explore more on how to integrate it with Forms.

Is this recommended way I have include front end javascript library (Vue or JQuery UI) under App_plugin Folders ?

Btw, thanks for reminding me on AngularJS end of support. :-)

Hi Brendan,

I have developed by DateRange Control using Pikaday.

Html code

<input type="text" name="@Model.Id" id="@Model.Id">

and javascript is

  function buildPikaday(validDates, invalidDates) {
        console.log('Hello inside new function');
        console.log(validDates);
        console.log(invalidDates);

        var start_date = new Pikaday({
            disableDayFn: function (date) {
                var enabled_dates = validDates; // dates I want to enable.
                var disabled_dates = invalidDates; // dates I want to disable.

                if ((($.inArray(moment(date).format("MM/DD/YYYY"), disabled_dates) === 0)) && $.inArray(moment(date).format("MM/DD/YYYY"), enabled_dates) === -1) {
                    return date;
                }
            },
            format: 'MM/DD/YYYY',
            field: document.getElementById('start_date'),
            disableWeekends: true
        });
    };

But when I am submitting my umbraco form, I am getting blank value. The value is available in textbox before submtting the form.

Any clue ?

Thank Brendan,

I have made the changes in the control and now everything is working as expected

is working on a reply...