Hi,
Telerik has been removed from dnn 9.1.1. I would like to add a datepicker to a number of controls in the edit control of my module. I have tried the jQuery datepicker, but I am nunable to make it work. These are the elements in my ascx file related to the datepicker.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="AcademicYearsEdit.ascx.cs" Inherits="khmersupport.Modules.SchoolAdministration.AcademicYears.Edit" Debug="true" %>
<%@ Register TagPrefix="dnn" TagName="label" Src="~/controls/LabelControl.ascx" %>
<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<%@ Register TagPrefix="dnn" TagName="JavaScriptLibraryInclude" Src="~/admin/Skins/JavaScriptLibraryInclude.ascx" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
This is the part that needs the datepicker:
<div id="EditAcademicYear" role="form" runat="server" class="dnnForm">
<h2>Add academic year</h2>
<fieldset>
<div class="dnnFormItem">
<dnn:label Text="Academic year" HelpText="e.g. 2017-2018" runat="server" />
<asp:TextBox id="inputEditAcademicYear" type="text" runat="server" class="academicyearinput" Width="6.5em" />
</div>
<div class="dnnFormItem">
<dnn:label Text="Academic year start" HelpText="e.g. 08/01/2017" runat="server" />
<input id="inputEditAcademicYearStart" type="date" runat="server" class="datepick" />
</div>
<div class="dnnFormItem">
<dnn:label Text="Academic year end" HelpText="e.g. 06/23/2018" runat="server" />
<input id="inputEditAcademicYearEnd" type="date" runat="server" class="datepick" />
</div>
<div class="dnnFormItem">
<dnn:label Text="Semester 2 English start" HelpText="e.g. 01/23/2018" runat="server" />
<input id="inputEditSemester2EngStart" type="date" runat="server" class="datepick" />
</div>
<div class="dnnFormItem">
<dnn:label Text="Semester 2 Khmer start" HelpText="e.g. 01/15/2018" runat="server" />
<input id="inputEditSemester2KhmStart" type="date" runat="server" class="datepick" />
</div>
</fieldset>
<input id="btnSaveAcademicYear" type='button' value='Add academic year' runat="server" onserverclick="btnSaveAcademicYear_Click" />
</div>
Originally I kept the javascript code in a separate file using jsinclude, but for debugging reasons, I have included the script in the ascx file:
<script type="text/javascript">
jQuery(document).ready(function (jQuery) {
jQuery("#<%= inputEditAcademicYearStart.ClientID %>").datepicker();
jQuery("#<%= inputEditAcademicYearEnd.ClientID %>").datepicker();
jQuery("#<%= inputEditSemester2EngStart.ClientID %>").datepicker();
jQuery("#<%= inputEditSemester2KhmStart.ClientID %>").datepicker();
jQuery("#<%= inputUpdateAcademicYearStart.ClientID %>").datepicker();
jQuery("#<%= inputUpdateAcademicYearEnd.ClientID %>").datepicker();
jQuery("#<%= inputUpdateSemester2EngStart.ClientID %>").datepicker();
jQuery("#<%= inputUpdateSemester2KhmStart.ClientID %>").datepicker();
jQuery('#ui-datepicker-div').css('clip', 'auto');
});
</script>
In the separate file, I tried to add the datepicker through the class ('datepick') but I have resorted to attaching the datepickers individually. In the external file, I used:
jQuery(".datepick").datepicker();
Alternatively, what controls would I have to register to use the bootstrap datepicker in my module, so to stay compliant with the clientresourcemanager?
Thanks,
Marc