Jquery is not working on sharepoint date time control

Question

Hi In my application page i have a sharepoint datetime control. I am using jquery on text changed event to calculate the number of days and displaying in a text box. Now i want to fire the same event when date is changed. But it is not working can you please help me.

<SharePoint:DateTimeControl ID="TStartDate" runat="server" DateOnly="true" UseTimeZoneAdjustment="false" LocaleId="2057"/>
    <asp:TextBox ID="txtNoofDays" runat="server" Width="28px"></asp:TextBox>
     <font color="#c00000">The Calculated Due Date is:</font><asp:TextBox ID="Txtdailyweekly" runat="server" style="margin-top: 8px"></asp:TextBox>

jquery
(document).ready(function () {
$('#' + '<%=this.txtNoofDays.ClientID  %>').change(function calculateAdddays() {

            var datepicker = $('#' + '<%=this.TStartDate.Controls[0].ClientID%>').val();
            alert(datepicker);
            var dmy = datepicker.split("/")
            var joindate = new Date(
        parseInt(
            dmy[2], 10),
            parseInt(dmy[1], 10) - 1,
            parseInt(dmy[0], 10)
        );
            var alertdays = $('#' + '<%=this.txtNoofDays.ClientID%>').val();

            alert(alertdays);
            joindate.setDate(joindate.getDate() + parseInt(alertdays));
            var x = "";

            x = (
            ("0" + joindate.getDate()).slice(-2) + "/" +
            ("0" + (joindate.getMonth() + 1)).slice(-2) + "/" +
            joindate.getFullYear()
        );
            alert(x);
            $('#' + '<%=this.Txtdailyweekly.ClientID %>').val(x);
        })

        $('#' + '<%=this.TStartDate.Controls[0].ClientID%>').change(function () { 
calculateAdddays();
alert("eventfired"); });

});

Answer 1

Where are you running that binding call? You are defining it but you aren't executing it. It looks like you're missing a $(document).ready(); statement that runs the binding code you created. I think in SharePoint the function is function pageLoad(){} for the "when the document is ready run this code" function. Standard jQuery $(document).ready() sometimes doesn't work with post-backs, etc.

Edit: I see a few problems with your code:

$('#' + '<%=this.txtNoofDays.ClientID  %>').change(function calculateAdddays(){...});

1. You need to bind the change event to your element. You cannot just call change(). You need something like the following: $('element').bind('change', function(){});
2. You are trying to define a function instead of create an anonymous function. If you wanted to call calculateAdddays() your code should be $('element').bind('change', function(){ calculateAdddays(); });

Answer 2

This article explains every scenario for the datetime picker control. I've used it without issue.

http://theway4ward.wordpress.com/2013/07/30/211/

Answer 3

-----So, for those still wanting to do this in a sharepoint-standard way:

you could use a pre-built function for this.. add this:

function OnPickerFinish(resultfield) {
    clickDataPicker(null,"","");
    if (resultfield === {whatever your control is, use debug to determine}){
         //here put whatever you want to fire
    }
}

mine ended up looking like this:

function OnPickerFinish(resultfield) {
    var theId = resultfield.id
    clickDatePicker(null,"","");     
    if (theId === 'ctl00_m_g_4376330d_aa10_409c_8ea7_9e1a5c1ba78d_ff1261_1_ctl00_ctl00_DateTimeField_DateTimeFieldDate') {
        if ($("select[title='Review Frequency']").val() == 'Custom review date' && $("input[title='Custom Review Date']").val() !== "") { 
            $("input[title='Next Scheduled Review Date']").val($("input[title='Custom Review Date']").val());
        }   
    }
}

this was mentioned in the prior wordpress link suggested by peter but that site is no longer up.