locked
DatePicker RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code & i am using DatePicker . I want in StartDate Day should always be one & in Closing Date Day should be the last day of the month. I want Validation at Client Side as well as Server Side. If user enters Start Date = '01/07/2018' then Valid Closing Date should be '31/07/2018'

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#gvwPeriod').dataTable({
                    "pageLength": 10
                });
                $('.datepicker').datepicker({
    
                });
                $(".datepicker").datepicker("option", "dateFormat", "dd/mm/yy");
            });
    
        </script>
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
        <asp:HiddenField ID="hdfsaveType" Value="Add" runat="server" />
        <asp:HiddenField ID="hdfId" runat="server" />
        
        <div class="defineFloat df">
            <div class="col-sm-12">
                <div class="col-sm-4 pad0">
                    <label for="StartDate" class="col-sm-5 col-form-label">Start Date</label>
                    <div class="col-sm-7">
                        <asp:TextBox ID="txt_StartDate"  runat="server" CssClass="form-control datepicker" placeholder="Start Date"></asp:TextBox>
                    </div>
                </div>
            </div>
        </div>
        <div class="defineFloat df">
            <div class="col-sm-12">
                <div class="col-sm-4 pad0">
                    <label for="ClosingDate" class="col-sm-5 col-form-label">Closing Date</label>
                    <div class="col-sm-7">
                        <asp:TextBox ID="txt_ClosingDate"  runat="server" CssClass="form-control datepicker" placeholder="Closing Date"></asp:TextBox>
                    </div>
                </div>
            </div>
        </div>
        
    
        
    </asp:Content>
    
    
    
    
    

    Thanks

    Monday, November 19, 2018 10:59 AM

Answers

  • User-271186128 posted

    Hi JagjitSingh,

      I have below code & i am using DatePicker . I want in StartDate Day should always be one & in Closing Date Day should be the last day of the month. I want Validation at Client Side as well as Server Side. If user enters Start Date = '01/07/2018' then Valid Closing Date should be '31/07/2018'

    From your description, the Closing Date depends on the StartDate, I suggest you could try to set the Readonly property to true (for the ClosingDate TextBox). Then, you could refer to the following code to set the ClosingDate value in the StartDate change event.

    Code as below:

            <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
       <%-- <link rel="stylesheet" href="/resources/demos/style.css" />--%>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                
                $("#txt_StartDate").datepicker({ dateFormat: 'dd/mm/yy' }).on("change", function () {
                    //get start date
                    var startdate = $(this).val();
                    //split the date to get the year and month
                    var array = startdate.split("/")
                    var year = parseInt(array[2]), month = parseInt(array[1]);
    
                    //set the closing date.
                    $("#txt_ClosingDate").datepicker({ dateFormat: 'dd/mm/yy' });
                    $("#txt_ClosingDate").datepicker("setDate", new Date(year, month, 0));
                });
            });
        </script>
    
        <asp:TextBox ID="txt_StartDate" ClientIDMode="Static" runat="server" CssClass="form-control datepicker" placeholder="Start Date"></asp:TextBox>
    
        <asp:TextBox ID="txt_ClosingDate" ClientIDMode="Static" ReadOnly="true" runat="server" CssClass="form-control datepicker" placeholder="Closing Date"></asp:TextBox>
    

    the screenshot as below:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 20, 2018 6:33 AM
  • User-271186128 posted

    Hi JagjitSingh,

    1 issue when i write .datepicker in place of #txt_StartDate then it shows Datepicker . If i write #txt_StartDate then it does not show Datepicker

    Please check your code whether you set the ClientIDMode property to Static. 

      <asp:TextBox ID="txt_StartDate" ClientIDMode="Static" runat="server" CssClass="form-control datepicker" placeholder="Start Date"></asp:TextBox>
    

    After rendering, you could also use F12 developer tools to check the ID property.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 21, 2018 7:00 AM

All replies

  • User-271186128 posted

    Hi JagjitSingh,

      I have below code & i am using DatePicker . I want in StartDate Day should always be one & in Closing Date Day should be the last day of the month. I want Validation at Client Side as well as Server Side. If user enters Start Date = '01/07/2018' then Valid Closing Date should be '31/07/2018'

    From your description, the Closing Date depends on the StartDate, I suggest you could try to set the Readonly property to true (for the ClosingDate TextBox). Then, you could refer to the following code to set the ClosingDate value in the StartDate change event.

    Code as below:

            <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
       <%-- <link rel="stylesheet" href="/resources/demos/style.css" />--%>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                
                $("#txt_StartDate").datepicker({ dateFormat: 'dd/mm/yy' }).on("change", function () {
                    //get start date
                    var startdate = $(this).val();
                    //split the date to get the year and month
                    var array = startdate.split("/")
                    var year = parseInt(array[2]), month = parseInt(array[1]);
    
                    //set the closing date.
                    $("#txt_ClosingDate").datepicker({ dateFormat: 'dd/mm/yy' });
                    $("#txt_ClosingDate").datepicker("setDate", new Date(year, month, 0));
                });
            });
        </script>
    
        <asp:TextBox ID="txt_StartDate" ClientIDMode="Static" runat="server" CssClass="form-control datepicker" placeholder="Start Date"></asp:TextBox>
    
        <asp:TextBox ID="txt_ClosingDate" ClientIDMode="Static" ReadOnly="true" runat="server" CssClass="form-control datepicker" placeholder="Closing Date"></asp:TextBox>
    

    the screenshot as below:

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, November 20, 2018 6:33 AM
  • User-1499457942 posted

    Hi ZHi

      Thanks . 1 issue when i write .datepicker in place of #txt_StartDate then it shows Datepicker . If i write #txt_StartDate then it does not show Datepicker

     $("#txt_StartDate").datepicker({ dateFormat: 'dd/mm/yy' }).on("change", function ()


    Thanks
    Wednesday, November 21, 2018 6:55 AM
  • User-271186128 posted

    Hi JagjitSingh,

    1 issue when i write .datepicker in place of #txt_StartDate then it shows Datepicker . If i write #txt_StartDate then it does not show Datepicker

    Please check your code whether you set the ClientIDMode property to Static. 

      <asp:TextBox ID="txt_StartDate" ClientIDMode="Static" runat="server" CssClass="form-control datepicker" placeholder="Start Date"></asp:TextBox>
    

    After rendering, you could also use F12 developer tools to check the ID property.

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 21, 2018 7:00 AM