Dynamically adding JQuery date time picker

Question

2.00/5 (1 vote)

See more:

Hi,

I have written a javascript function to add some textboxes dymanically to a div. I want the textbox to behave as Jquery datepicker.

I have added Jquery references in my page and i have written $(".className).datepicker() at the end of the JS function. But its not working. I also tried $(".className).datepicker("refresh") , but in vain .

This is my html file

HTML

<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
</head>
<body>
    <div id="1"></div>
    <input type="button" id="btn" onclick="Create();">
</body>
</html>

<script type="text/javascript">

    function Create() {

        for (var i = 0; i < 10; i++) {
            var datePicker = "<input type='text' id='datePicker" + i + "' class='date'/>";
            $("#1").append(datePicker);
        }
        $(".date").datepicker("refresh");

    }
</script>

Updated with my ascx page

ASP.NET

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MemoDashBoard.ascx.cs" Inherits="KPMG.DE.eGroup.UI.WebParts.MemoDashBoard.MemoDashBoard" %>
<link type="text/css" href="../../_layouts/15/KPMG.DE.eGroup.UI/css/Style-GAnG.css" rel="stylesheet" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script type="text/javascript">

    var inEditMode = false;
    var currentMemoDates = [];
    var newMemoDates = [];
    var localeID = "";
    var AuditType = "";

    $(window).unload(function () {
        if (inEditMode) {

            if (confirm("You are about to leave the current page. All your changes will be lost. Do you want to continue?")) {

            }
            else {

            }
        }
    });

    function warning() {
        if (inEditMode == true && true) {
            return "You are about to leave the current page. All your changes will be lost. Do you want to continue?";
        }
    }

    $(window).onbeforeunload = warning;

    $(document).ready(function () {

        localeID = $("#" + '<%= hdnLocale.ClientID %>').val();
    });

        function MemoDashboardEdit() {

            //Setting the edit flag to true
            inEditMode = true;

            BindDatePickers();

            //Checking whether the site is in Prepared For Audit stage
            //var isPreparedForAudit = GetSiteStatus(_spPageContextInfo.siteAbsoluteUrl, "Group Audit Information", "", "", "");
            //if (isPreparedForAudit) {

            //    BindDatePickers();
            //}
            //else {
            //    $("#errorMessage").text("Prepared For Audit not done.");
            //}
        }

        //Getting start audit status
        function GetSiteStatus(url, listname, query, complete, failure) {

            var isPreparedForAudit = true;
            // Executing our items via an ajax request
            $.ajax({
                url: url + "/_api/web/lists/getbytitle('" + listname + "')/items" + query,
                method: "GET",
                async: false,
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {
                    if (data.d.results.length == 0) {
                        isPreparedForAudit = false;
                    }
                    else {
                        if (data.d.results[0].AuditType == "YE") {
                            AuditType = "Year End Memos";
                        }
                        else if (data.d.results[0].AuditType == "Q1") {
                            AuditType = "Q1";
                        }
                        else if (data.d.results[0].AuditType == "Q2") {
                            AuditType = "Q2";
                        }
                        else if (data.d.results[0].AuditType == "Q3") {
                            AuditType = "Q3";
                        }
                    }
                },
                error: FetchFailed
            });
            return isPreparedForAudit;
        }

        //Creating the calendar for all the memo field
        function BindDatePickers() {

            //Changing the button on click to validate the data
            $("#EditDashBoard").off('click', 'a').on('click', ValidateData);
            $("#EditDashBoard").attr('value', 'Save');

            //Adding new date pickers for each memo date fields
            var index = 0;
            $(".gridStyle td a").each(function () {

                if ($(this).attr('href').toLowerCase().indexOf("workflowview.aspx") < 0) {

                    //Memo Name 
                    var memoURL = $(this).attr('href').split('?')[0];
                    var memoName = memoURL.split('/')[memoURL.split('/').length - 1];

                    //Providing id for the anchor tag
                    $(this).attr("id", "hyp_" + memoName + "_memo" + index);

                    //hiding the currend date anchor date
                    $(this).hide();

                    //Make the datetime pickers visible
                    //$("#auditDate_" + memoName + "_memo" + index).show();

                    var datePicker = "<input type='text' id='auditDate_" + memoName + "_memo" + index + "' class='hasDatepicker'/>";
                    $(this).parent().append(datePicker);
                    index++;
                }
            });

            $(".hasDatepicker").datepicker();
        }

        function ValidateData() {

            var emptyDates = [];
            var memoDates = [];
            var errorDates = [];



            var tmpDate = new Date();
            var month = tmpDate.getMonth() + 1;
            var day = tmpDate.getDate();
            var currentDate = "";
            //dd/mm/yyyy
            if (localeID == "1031") {
                currentDate = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + tmpDate.getFullYear();
            }
                //mm/dd/yyyy
            else if (localeID == "1033") {
                currentDate = (('' + month).length < 2 ? '0' : '') + month + '/' + (('' + day).length < 2 ? '0' : '') + day + '/' + tmpDate.getFullYear();
            }

            var index = 0;
            var errorPopUpHeader = "";
            var errorPopUpBody = "";

            var index = 0;
            $('.gridStyle td').find('input').each(function () {

                var memoName = $(this).parent().find('a').attr('href').split('?')[0].split('/')[asd.split('/').length - 1];

                //Get the memo audit assembly date here (audit date +60)
                var currentAuditDate = $(this).parent().find('a').text();

                //New audit date from calendar
                var newAuditDate = $(this).val();

                //Audit Assembly Date (Audit date + 60 days)
                var assemblyAuditDate = new Date(currentAuditDate);
                var days = parseInt(60);
                assemblyAuditDate.setDate(date.getDate() + days);

                //If the new date is not null and is not the same as old then do the checking and store it in array for saving
                if (newAuditDate && new Date(newAuditDate) != new Date(currentAuditDate)) {

                    if (new Date(assemblyAuditDate) < new Date(newAuditDate) && newAuditDate > currentDate) {

                        //Setting anchor tag values to 
                        $("#auditDate_" + memoName + "_memo" + index).value(newAuditDate);

                        //Pushing to array for saving
                        var memoDetail = {};//make a new product for each iteration
                        memoDetail['MemoName'] = memoName;
                        memoDetail['ComponentName'] = "Put component name here";
                        memoDetail['Component ID'] = "Put component id here";
                        memoDetail['DueDate'] = newAuditDate;
                        newMemoDates.push(memoDetail);
                    }
                    else {

                        if (newAuditDate < currentDate) {
                            errorPopUpBody += "<tr>";
                            errorPopUpBody += "<td></td><td>" + memoName + "</td>";
                            errorPopUpBody += "<td>" + newAuditDate + "</td><td>Selected date is less than current date.</td>";
                            errorPopUpBody += "</tr>";
                        }
                        else if (assemblyAuditDate > newAuditDate) {
                            errorPopUpBody += "<tr>";
                            errorPopUpBody += "<td></td><td>" + memoName + "</td>";
                            errorPopUpBody += "<td>" + newAuditDate + "</td><td>Selected date is less than audit assembly date</td>";
                            errorPopUpBody += "</tr>";
                        }
                    }
                }

                index++;
                //alert($(this).parent().attr('id'));
            });

            // Create the error table and show as pop up
            if (errorPopUpBody) {
                errorPopUpHeader = "<div class='popUpBtnContainer'>";
                errorPopUpHeader += "<img id='closePopUp' class='floatRight popUpCloseBtn' />";
                errorPopUpHeader += "</div>";
                errorPopUpHeader += "<br class='hSpace10' /><br class='hSpace10' />";
                errorPopUpHeader += "<div class='popupFormHeading'>Invalid Due Dates</div>";
                errorPopUpHeader += "<br class='hSpace10' />";
                errorPopUpHeader += "<table class='formTable'>";
                errorPopUpHeader += "<th>Component ID</th><th>Memo Name</th>";
                errorPopUpHeader += "<th>Proposed Date</th><th>Reason for Warning</th>";
                $("#divError").append(errorPopUpHeader + errorPopUpBody);
                $("#divError").append("</table>");
                $("#divError").append("<label id='validationMessage'>Do you want to Cancel or Save?</label>");
                $("#divError").append("<input type='button' id='saveData' name='saveData' value='Save' />");
                $("#divError").append("<input type='button' id='cancelData' name='cancelData' value='Cancel' />");

                //Calling the pop up window
                ShowValidationWindow();
            }
            else {
                errorPopUpHeader = "<div class='popUpBtnContainer'>";
                errorPopUpHeader += "<img id='closePopUp' class='floatRight popUpCloseBtn' />";
                errorPopUpHeader += "</div>";
                errorPopUpHeader += "<br class='hSpace10' /><br class='hSpace10' />";
                errorPopUpHeader += "<div class='popupFormHeading'>Invalid Due Dates</div>";
                errorPopUpHeader += "<br class='hSpace10' />";
                errorPopUpHeader += "<table class='formTable'>";
                errorPopUpHeader += "<th>Component ID</th><th>Memo Name</th>";
                errorPopUpHeader += "<th>Proposed Date</th><th>Reason for Warning</th>";
                $("#divError").append(errorPopUpHeader);
                $("#divError").append("<tr><td colspan='4'>All dates are valid.</td></tr>");
                $("#divError").append("<input type='button' id='saveData' name='saveData' value='Save' />");
                $("#divError").append("<input type='button' id='cancelData' name='cancelData' value='Cancel' />");
            }
        }

        function ShowValidationWindow() {

            $('#validationPopUp').dialog({
                modal: true,
                dialogClass: 'no-close success-dialog',
                closeOnEscape: false,
                resizable: false,
                width: "auto",
                height: "auto",
                open: function () {
                    $(this).parent().appendTo($("form:first"));
                }
            });

        }

        function ClosePopupWindow() {
            SP.UI.ModalDialog.commonModalDialogClose(1, '1');
        }

        function SaveData() {

            // Call the REST service to save data
            if (selectedmemos != "") {

                var listName = "MemoDashBoard";

                if (newMemoDates) {
                    $.each(newMemoDates, function (key, value) {

                        //Generating Job name
                        var nextno = parseInt(GetPDFJobs(_spPageContextInfo.siteAbsoluteUrl, listName, "?$filter=substringof('GROUP',Title)&$orderby=Created desc&$top=1", "", "")) + 1;
                        var title = "job_" + nextno + "_GROUP_MemoDashBoard";
                        var itemType = getListItemType(listName);
                        var item = {
                            "__metadata": { "type": itemType },
                            "Title": title,
                            "SelectedMemos": memodashboardrequired + "|" + issuedashboardrequired + "|" + selectedmemos
                        };

                        $.ajax({
                            url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
                            type: "POST",
                            contentType: "application/json;odata=verbose",
                            data: JSON.stringify(item),
                            headers: {
                                "Accept": "application/json;odata=verbose",
                                "X-RequestDigest": $("#__REQUESTDIGEST").val()
                            },
                            success: function (data) {
                                ItemAddSuccess(data);
                            },
                            error: function (data) {
                                ItemAddFailed(data);
                            }
                        });
                    });
                }

            }
            //After save , show the anchor tag visible again and hide the date pickers
            var index = 0;
            $(".gridStyle td a").each(function () {

                var memoName = $(this).attr('href').split('?')[0].split('/')[asd.split('/').length - 1];

                //showing the  anchor date
                $(this).show();

                //Make the datetime pickers hidden
                $("#auditDate_" + memoName + "_memo" + index).hide();

                index++;

            });
        }

        function GenerateValidationPopUp(header, body) {
        }
</script>

<asp:HiddenField ID="hdnLocale" runat="server" />

<div id="validationPopUp" class="popupContainer noPaddingTop memoDashBoardPopupContainer">
</div>

<div class="memoDashboard">
    <div class="mainHeader marginTop10 noMarginBottom">Memo Dashboard</div>



    <div id="divPaging"></div>
    <br class="clear" />
    <div id="divGrid">
        <div class="tabContainer">
            <asp:Button Text="Year End Memos" BorderStyle="None" ID="Memos" CssClass="Initial floatLeft noMarginLeft" runat="server"
                OnClick="Memos_Click" />
            <asp:Button Text="Q1" BorderStyle="None" ID="Q1" CssClass="Initial floatLeft noMarginLeft" runat="server" Visible="false"
                OnClick="Q1_Click" />
            <asp:Button Text="Q2" BorderStyle="None" ID="Q2" CssClass="Initial floatLeft noMarginLeft" runat="server" Visible="false"
                OnClick="Q2_Click" />
            <asp:Button Text="Q3" BorderStyle="None" ID="Q3" CssClass="Initial floatLeft noMarginLeft" runat="server" Visible="false"
                OnClick="Q3_Click" />
        </div>
        <br class="hSpace10" />
        <div id="divLegend" class="tab_ststus_text"  runat="server">
            <img src="../_layouts/15/images/KPMG.DE.eGroup.UI/DashboardImages/legend_eng.PNG" alt="Dashboard Legend"
                id="imgLegend" class="floatLeft" />
        </div>
        <div id="divLegendClient" class="tab_ststus_text"  runat="server" style="display: none">
            <img src="../_layouts/15/images/KPMG.DE.eGroup.UI/DashboardImages/legend_eng_Client.PNG" alt="Dashboard Legend"
                id="img1" class="floatLeft" />
        </div>
        <br class="hSpace10" />
        <div id="filter">
            <div class="container">
                <table cellpadding="0" cellspacing="0" class="formTable">
                    <tr>
                        <td width="50">
                            <label class="label noMarginBottom">Scope</label></td>
                        <td>
                            <asp:DropDownList ID="ddlScope" runat="server" CssClass="combobox noMarginBottom marginRight10 floatLeft"></asp:DropDownList>
                            <asp:Button ID="btnApplyfilter" runat="server" Text="Apply Filter" OnClick="BtnApplyfilter_Click" CssClass="submitBtn floatLeft marginRight10 marginLeft10" />
                            <asp:Button ID="btnClearfilter" runat="server" Text="Clear Filter" OnClick="BtnClearfilter_Click" CssClass="submitBtn floatLeft marginRight10" />
                            <asp:Button ID="btnExport" runat="server" Text="Export" OnClick="BtnExport_Click" CssClass="submitBtn floatLeft marginRight10" />
                            <input type="button" id="EditDashBoard" value="Edit Due Date" />
                        </td>

                    </tr>
                </table>
            </div>

            <br class="hSpace10" />
            <div id="divGRDContainer" class="btnContainer noPaddingLeft noPaddingTop"  runat="server">
                <asp:Button ID="btnPrevious" Text="<"  runat="server" />
                <asp:Button ID="btnNext" Text=">" runat="server" OnClick="BtnNext_Click" CssClass="paginationBtn floatLeft" />
                <asp:HiddenField ID="hdnPage" Visible="false" runat="server"></asp:HiddenField>

            </div>
        </div>

        <div class="container noPaddingTop noPaddingLeft noPaddingRight">
            <table cellpadding="0" cellspacing="0" class="gridStyle">

                <thead>
                    <asp:Repeater runat="server" ID="rptHeaderRow">
                        <ItemTemplate>
                            <th><%# Eval("Caption") %></th>
                        </ItemTemplate>
                    </asp:Repeater>
                </thead>
                <tbody>
                    <asp:ListView ID="listExcelData" runat="server" ItemPlaceholderID="PlaceHolder2">

                        <ItemTemplate>
                            <tr>


                                <asp:ListView runat="server" ID="PlaceHolder2" DataSource='<%# ((System.Data.DataRowView)Container.DataItem).Row.ItemArray %>'>
                                    <ItemTemplate>
                                        <td><%# Container.DataItem %></td>
                                    </ItemTemplate>
                                </asp:ListView>
                            </tr>
                        </ItemTemplate>
                    </asp:ListView>
                </tbody>
            </table>
        </div>
        <div class="notifications">
            <asp:Label ID="lblMsg" runat="server"></asp:Label>

        </div>

    </div>
</div>

Can anyone please help me

Thanks

Posted 24-Jan-15 21:42pm

Arjun Menon U.K

Updated 24-Jan-15 22:19pm

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kornfeld Eliyahu Peter · Answer 1 · 2015-01-24T22:01:00

Solution 1

Do two things...
1. Bring your script block inside the html tag...
2. Remove the "refresh" from datepicker method...
See a working sample here: http://jsfiddle.net/101ta1nw/[^]

Posted 24-Jan-15 22:01pm

Kornfeld Eliyahu Peter

Comments

Arjun Menon U.K 25-Jan-15 4:10am

Hi Peter,
It did the trick. This is a sample thing i did when it didn't work in my project. In my project scenario, its an ascx page. and i have written the script below the ascx stuffs. So what shall i do in this case?

Kornfeld Eliyahu Peter 25-Jan-15 4:12am

Ensure the script part is inside the page (inside the HTML tag) - for ASPX you may put it at the and (but inside) the BODY tag...
For most specific answer I should see you code...

Arjun Menon U.K 25-Jan-15 4:20am

I have updated my question. The dynamic binding is happening in this function "BindDatePickers". Also which all references are required for the date picker to come

Kornfeld Eliyahu Peter 25-Jan-15 4:25am

Your ASPX page seems to me all wrong...
A simple ASPX page a markup structure like this:
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

</div>
</form>
</body>
</html>
I can't see this in your code...

Arjun Menon U.K 25-Jan-15 4:25am

its ascx not aspx. Sharepoint custom webpart

Arjun Menon U.K 25-Jan-15 4:37am

Also, i will soon move the scripts to a js file and will add the reference in ascx

Arjun Menon U.K 25-Jan-15 5:49am

Am able to do in static control.