New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsModulesModulesusing datepicker in edit control of a moduleusing datepicker in edit control of a module
Previous
 
Next
New Post
10/8/2017 4:53 AM
 

 

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
 
New Post
10/21/2017 10:16 AM
 

I got this one solved...

 
New Post
3/13/2018 9:23 PM
 
Smashing ... what's the solution? :)

I need it. Specifically I need to add 2 of these to a Reports module to filter a Data Table by date.

Thanks,

Mike Durthaler
 
New Post
7/13/2018 6:27 PM
 
Awesome .. Can you please share the solution as I am facing the same issue.
 
Previous
 
Next
HomeHomeDevelopment and...Development and...Building ExtensionsBuilding ExtensionsModulesModulesusing datepicker in edit control of a moduleusing datepicker in edit control of a module


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.