locked
Missing Next and Previous Navigation icon in a Calendar Control RRS feed

  • Question

  • User158811806 posted

    I have the following js that display the control button correctly and display calendar when clicked on it. But, the calendar does not display the arrows to move to next or previous month and display a square box when I move the cursor on the upper left or upper right corner.

    How do I fix it to display the arrows? I have calendar.gif in the application's image folder MyApp\images but I have also tried it buy moving it over to Scripts folder and it still did not work.

    $("input[id$='txtValidityStartDate']").datepicker({ showButtonPanel: true, showOn: "both", buttonImage: "images/calendar.gif", buttonImageOnly: true });

    Monday, May 2, 2016 2:00 PM

Answers

  • User-271186128 posted

    Hi njehan01,

    Please refer to the following screenshot:

    For the calendar image, please check the images folder, and make sure it contains the calendar image, and the image extension is gif. 

    For the previous and next icon, I suggest you can try to use the jquery-ui.css.

    More details, you can refer to the following code:

            <div>
                <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
                <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
                <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
                <script type="text/javascript">
                    $(function () {
                        $("#datepicker").datepicker({
                            shoeButtonPanel: true,
                            showOn: "button",
                            buttonImage: "Images/calendar.png",
                            buttonImageOnly: true,
                            buttonText: "Select date"
                        });
                    });
    
                </script>
                <div>
                    <p>
                        Date:
                    <input type="text" id="datepicker" />
                    </p>
                </div>
            </div>

    If it is still not working, I suggest you can use F12 developer tools to check the relevant elements, to see whether the image is load.

    https://msdn.microsoft.com/en-us/library/gg699337(v=vs.85).aspx

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 3, 2016 2:48 AM

All replies

  • User527778624 posted

    Hi,

    If the image is in MyApp\images folder, then refer it like this:

    /images/calendar.gif

    Monday, May 2, 2016 2:51 PM
  • User158811806 posted

    I have already tried /images/calendar.gif but still no arrows

    Monday, May 2, 2016 3:12 PM
  • User158811806 posted

    Do I need to add images for "Next" and "Previous"?

    Monday, May 2, 2016 3:52 PM
  • User-271186128 posted

    Hi njehan01,

    Please refer to the following screenshot:

    For the calendar image, please check the images folder, and make sure it contains the calendar image, and the image extension is gif. 

    For the previous and next icon, I suggest you can try to use the jquery-ui.css.

    More details, you can refer to the following code:

            <div>
                <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
                <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
                <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
                <script type="text/javascript">
                    $(function () {
                        $("#datepicker").datepicker({
                            shoeButtonPanel: true,
                            showOn: "button",
                            buttonImage: "Images/calendar.png",
                            buttonImageOnly: true,
                            buttonText: "Select date"
                        });
                    });
    
                </script>
                <div>
                    <p>
                        Date:
                    <input type="text" id="datepicker" />
                    </p>
                </div>
            </div>

    If it is still not working, I suggest you can use F12 developer tools to check the relevant elements, to see whether the image is load.

    https://msdn.microsoft.com/en-us/library/gg699337(v=vs.85).aspx

    Best regards,
    Dillion

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 3, 2016 2:48 AM