locked
put null (empty) value to datetime control RRS feed

  • Question

  • Recently, I have lot trouble with the datetime control. Now, I need to clear up the users invalid input. For example: users enter 07/02/2006 for the date of birth field (DOB). Because the program set 06/30/2006 is the latest date. We need to give use a warring and clear 07/02/2006 in the field. I tried to use ClearSelection() method in C#. But the method somehow does not work with the event OnDateChanged? So I may have to looking for JavaScript? Please see if you can help me out. Many thanks.   
    Monday, July 20, 2020 2:10 PM

Answers

  • Hi,

    The id you defined in solution is not the true id after you add the control in page.

    So we need to change the jQuery selector.

    Updated code:

    <SharePoint:DateTimeControl ID="dtDOB" runat="server"  DateOnly="true" />
    <script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {
        let limitDay = new Date(2006, 5, 30);
        $("input[id*='dtDOB']").get(0).onvaluesetfrompicker = DatePickerChanged;
        function DatePickerChanged(e) {
          let day = new Date($("input[id*='dtDOB']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not after 6/30/2006")
            $("input[id*='dtDOB']").val("")
          }
         }
        $("input[id*='dtDOB']").change(function () {
          //console.log("input change "+$("input[title='date']").val());
            let day = new Date($("input[id*='dtDOB']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not after 6/30/2006")
            $("input[id*='dtDOB']").val("")
          }
        });
      });
    </script>

    Test result:

    This “SharePoint 2013 - Development and Programming” Forum will be migrating to a new home on Microsoft Q&A, please refer to this sticky post for more details.

    Best Regards,

    Amos


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    • Marked as answer by eg10013 Wednesday, July 22, 2020 1:57 PM
    Wednesday, July 22, 2020 7:37 AM

All replies

  • Hi,

    For SharePoint date control,we have two ways to change the time, the first is to change the time on the calendar, the second is to enter the time into the text box on the keyboard. We need two methods to get the changed value.

    Demo(date is my column name,yo need to change to yours):

    <script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {
        let limitDay = new Date(2008, 6, 30);
        $("input[title='date']").get(0).onvaluesetfrompicker = DatePickerChanged;
        function DatePickerChanged(e) {
    
          let day = new Date($("input[title='date']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not bofore 6/30/2008")
            $("input[title='date']").val("")
          }
        }
        $("input[title='date']").change(function () {
          //console.log("input change "+$("input[title='date']").val());
          let day = new Date($("input[title='date']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not bofore 6/30/2008")
            $("input[title='date']").val("")
          }
        });
      });
    </script>

    This “SharePoint 2013 - Development and Programming” Forum will be migrating to a new home on Microsoft Q&A, please refer to this sticky post for more details.

    Best Regards,

    Amos


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    Tuesday, July 21, 2020 2:16 AM
  • Hi AmosWu,

    First thanks for your response. I follow you instruction to put the JavaScript in the ascx file. It does not do anything? When I enter in invalid date, nothing happens? Any idea?

    Here is my seting

    <SharePoint:DateTimeControl ID="dtDOB" runat="server" DateOnly="true" AutoPostBack="true" OnDateChanged="DOB_Changed"/> 

    * I comment out the OnDateChanged C# code.

    Here is the code I added 

    <script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {
        let limitDay = new Date(2006, 6, 30);
        $("input[title='dtDOB']").get(0).onvaluesetfrompicker = DatePickerChanged;
        function DatePickerChanged(e) {
          let day = new Date($("input[title='dtDOB']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not bofore 6/30/2006")
            $("input[title='dtDOB']").val("")
          }
         }
        $("input[title='dtDOB']").change(function () {
          //console.log("input change "+$("input[title='date']").val());
            let day = new Date($("input[title='dtDOB']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not bofore 6/30/2008")
            $("input[title='dtDOB']").val("")
          }
        });
      });
    </script>

    Tuesday, July 21, 2020 7:48 PM
  • Hi,

    The id you defined in solution is not the true id after you add the control in page.

    So we need to change the jQuery selector.

    Updated code:

    <SharePoint:DateTimeControl ID="dtDOB" runat="server"  DateOnly="true" />
    <script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {
        let limitDay = new Date(2006, 5, 30);
        $("input[id*='dtDOB']").get(0).onvaluesetfrompicker = DatePickerChanged;
        function DatePickerChanged(e) {
          let day = new Date($("input[id*='dtDOB']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not after 6/30/2006")
            $("input[id*='dtDOB']").val("")
          }
         }
        $("input[id*='dtDOB']").change(function () {
          //console.log("input change "+$("input[title='date']").val());
            let day = new Date($("input[id*='dtDOB']").val());
          if (limitDay.getTime() < day.getTime()) {
            alert("date can not after 6/30/2006")
            $("input[id*='dtDOB']").val("")
          }
        });
      });
    </script>

    Test result:

    This “SharePoint 2013 - Development and Programming” Forum will be migrating to a new home on Microsoft Q&A, please refer to this sticky post for more details.

    Best Regards,

    Amos


    "SharePoint" forums will be migrating to a new home on Microsoft Q&A !
    We invite you to post new questions in the "SharePoint" forums' new home on Microsoft Q&A !

    • Marked as answer by eg10013 Wednesday, July 22, 2020 1:57 PM
    Wednesday, July 22, 2020 7:37 AM
  • Thanks again Amos, it works.
    Wednesday, July 22, 2020 1:58 PM