none
Jquery Datepicker excluding weekends RRS feed

  • Question

  • Hi Experts,

    Currently I'm using Jquery DatePicker in SharePoint Page, I want to exclude weekends when selecting, is this possible?

    Thanks for any help.

    Wednesday, February 12, 2020 8:19 AM

Answers

  • Hi developer sp,

    Here is a sample demo for your reference:

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
        <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script language="javascript">
            $(document).ready(function () {
                $("#txtworkingdays").datepicker({
                    beforeShowDay: $.datepicker.noWeekends
                });
            });
        </script>
    </head>
    <body>
        Date :
        <input id="txtworkingdays" type="text">
    </body>
    </html>

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, February 13, 2020 7:13 AM

All replies

  • Hi developer sp,

    Here is a sample demo for your reference:

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
        <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script language="javascript">
            $(document).ready(function () {
                $("#txtworkingdays").datepicker({
                    beforeShowDay: $.datepicker.noWeekends
                });
            });
        </script>
    </head>
    <body>
        Date :
        <input id="txtworkingdays" type="text">
    </body>
    </html>

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, February 13, 2020 7:13 AM
  • We can provide the noWeekends() function into the beforeShowDay option which will calculate all the weekdays and provide an array of true/false values indicating whether a date is selectable.

    Try below code:

    $(document).ready(function () {
        $("#datepickerFieldId").datepicker({
           beforeShowDay: $.datepicker.noWeekends
        });
    });

    Where datepickerFieldId  is the ID of your datepicker input element.

    Reference:

    JQuery Datepicker - NoWeekends Utility

    --------------------------------------------------------------------------------------------

    Please Vote(^) and accept it as an answer if it helped you.



    • Edited by Ganesh_Sanap Thursday, February 13, 2020 7:59 AM
    • Proposed as answer by Ganesh_Sanap Friday, February 14, 2020 10:50 AM
    Thursday, February 13, 2020 7:58 AM
  • Hello Jerry,

    Thanks very much for your reply, this is working.

    Thanks

    Friday, February 14, 2020 10:56 AM
  • Hello Ganesh,

    I have used the code from Jerry with his first post, your reply is the same as him, so I will Mark his as answer. I'm very glad you can help me too.

    Thank you very much. :)

    Friday, February 14, 2020 10:57 AM