Menu ▼



Posted By :
avatarmrkraju
Total Views : 675

Show dates in other months in jQuery Datepicker

In this example we will see how to show the previous and next month dates in JQuery UI date picker. By default jQuery date picker will show only current(navigated) month dates only. To show previous or next month dates in the current month we need to set the showOtherMonths property value to "true". and to allow to select the dates in other months set the selectOtherMonths property value to "true".

Example: Show other dates (not selectable)
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            showOtherMonths: true
        });
    });
</script>

Example: Show other dates and make them selectable
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate1").datepicker({
            showOtherMonths: true,
            selectOtherMonths: true
        });
    });
</script>

Source Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <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 () {
            $("#txtdate").datepicker({
                showOtherMonths: true
            });
            $("#txtdate1").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true
            });
        });
    </script>
</head>
<body>
    Show Other Date :
    <input id="txtdate" type="text">
    <br/><br/>
    Enable Other Date :
    <input id="txtdate1" type="text">
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com