Module Builder - Custom Field Control with Calendar (Customized)
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?
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
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.
Hi Adam,
Not that I know of. But I think the RadDateTime picker should cover most of the functionality, right?
Kind regards,
Daniel
It should, but was hoping to simply extend the built-in one, if possible.
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"));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);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"; Thanks, Mark. I'll give it a try!