+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Module Builder - Custom Field Control with Calendar (Customized)

Module Builder - Custom Field Control with Calendar (Customized)

8 posts, 0 answered
  1. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    04 Jun 2013
    Link to this post
    What is the easiest way to create a custom field control with a calendar, similar to the built in datetime field for Module Builder, but more customized? Basically, I want to disable the "time" values (just a shortdate string) and allow cms users to only select a Sunday for the month. Can anyone point me in the right direction?
  2. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    04 Jun 2013 in reply to Adam
    Link to this post
    Hi Adam,

    I would go for a custom Field Control. You can create this control by using Sitefinity Thunder and adjust it to your needs.

    You could use a RadDatePicker or maybe a jQuery solution for it?

    Kind regards,
    Daniel

    * If this post helped you, please mark it is answered
  3. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    04 Jun 2013 in reply to Daniel Plomp
    Link to this post
    Hi Daniel,

    That's what I figured. However, is there any type of starter project or code sample out there that has the code for the built in calendar field in Module Builder? Building one from scratch could cost me 1-2 of coding, possibly.

  4. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    04 Jun 2013 in reply to Adam
    Link to this post
    Hi Adam,

    Not that I know of. But I think the RadDateTime picker should cover most of the functionality, right?

    Kind regards,
    Daniel
  5. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    04 Jun 2013 in reply to Daniel Plomp
    Link to this post
    It should, but was hoping to simply extend the built-in one, if possible.
  6. Daniel Plomp
    Daniel Plomp avatar
    952 posts
    Registered:
    18 Feb 2004
    04 Jun 2013 in reply to Adam
    Link to this post
    Hi Adam,

    You could try to create a control that inherits from DateField. But I'm afraid that too much methods will be private or sealed.

    As you can see the DateField actually uses the jQuery UI libraries to add the DateTime picker functionality:

    scriptReferences.Add(new ScriptReference("Telerik.Sitefinity.Resources.Scripts.jquery-ui-1.9.2.custom.min.js", "Telerik.Sitefinity.Resources"));
    scriptReferences.Add(new ScriptReference("Telerik.Sitefinity.Resources.Scripts.jquery-ui-timepicker-addon.js", "Telerik.Sitefinity.Resources"));

    Kind regards,
    Daniel
  7. Mark
    Mark avatar
    147 posts
    Registered:
    01 Jun 2010
    04 Jun 2013
    Link to this post
    Here's something I received from support on modifying the format of the current date picker in the backend. You should be able to modify it to suit your needs.

    DateFieldCustom.js
    Type.registerNamespace("SitefinityWebApp.CustomWidgets.DateFieldSample");
     
    SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom = function (element) {
        SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom.initializeBase(this, [element]);
    }
     
    SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom.prototype = {
        initialize: function () {
            SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom.callBaseMethod(this, 'initialize');
        },
        dispose: function () {
            SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom.callBaseMethod(this, 'dispose');
        },
        set_datePickerFormat: function (dFormat, tFormat) {
            this._datePicker = jQuery("#" + this._datePickerId).datetimepicker({
                dateFormat: dFormat,
                hourGrid: tFormat,
                timeFormat: 'hh:mm TT',
                minuteGrid: 10,
                beforeShow: this._datePickerOnPopupOpeningDelegate,
                onClose: this._datePickerOnPopupClosingDelegate,
                showOn: "focus",
                ampm: true
            });
        }
    }
     
    SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom.registerClass('SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom', Telerik.Sitefinity.Web.UI.Fields.DateField);

    DateFieldCustom.cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using Telerik.Sitefinity.Web.UI.Extenders;
    using Telerik.Sitefinity.Web.UI.Fields;
     
    namespace SitefinityWebApp.CustomWidgets.DateFieldSample
    {
        public class DateFieldCustom : DateField
        {
            public override IEnumerable<ScriptReference> GetScriptReferences()
            {
                string assemblyName = typeof(DateFieldCustom).Assembly.FullName;
                var scripts = new List<ScriptReference>(base.GetScriptReferences());
                scripts.Add(new ScriptReference(DateFieldCustom.dateFieldScript, assemblyName));
                                
                return scripts.ToArray();
            }
            private const string dateFieldScript = "SitefinityWebApp.CustomWidgets.DateFieldSample.DateFieldCustom.js";
        }
        
    }
  8. Adam
    Adam avatar
    23 posts
    Registered:
    05 Apr 2013
    04 Jun 2013 in reply to Mark
    Link to this post
    Thanks, Mark. I'll give it a try!
8 posts, 0 answered