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>

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

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

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

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

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



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(); });
  • sorry i didnt post my entire jquery code. here – santosh kondapalli Jul 19 '13 at 7:04
  • i tried so many options i think sharepoint datepicker control change event is not working with java script .. can any one helkp me please – santosh kondapalli Jul 19 '13 at 13:21
  • DOes any one tried calling the sharepoint date time control id in jquery or java script.. kindly let me know please – santosh kondapalli Jul 21 '13 at 4:15
  • Have you tried using $().bind('change', function(){}) instead of '$().change(function(){})'? – EHorodyski Jul 21 '13 at 21:00
  • yes i tried but still it is not triggering – santosh kondapalli Jul 22 '13 at 11:22

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



-----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) {
    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
    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.

Your Answer

