1

I am using jQuery Datepicker to pick up date in my web page. I want similar functionality as shown pic below.

Click here for similar functionality 

 <title>Sample Datepicker</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#datepicker").datepicker({
                showButtonPanel: true,
                changeMonth: false,
                changeYear: false,
                showAnim: "blind"
            });
        });
    </script>
    <style type="text/css">
        body {
            font-family: Verdana, Arial, sans-serif;
            font-size: 12px;
        }

        .ui-datepicker-week-end a {
            color: red !important;
        }

        .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
            float: left;
            margin-left: 35%;
        }

        #ui-datepicker-div button.ui-datepicker-close {
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="text" id="datepicker">
        </div>
    </form>
</body>

I want similar functionality as shown picture above using jQuery Datepicker. As shown in image, by clicking on month picker it opens new popup and you can choose year option form that. How it is possible?

naveen
  • 53,448
  • 46
  • 161
  • 251
user6648120
  • 11
  • 2
  • This is not the way of asking questions to accomplish your tasks on SO. Plz try it out and share your code when you stuck at somehwere. Then SO community will definitely lend their hands to help you out. Otherwise your question will be closed or flagged by moderators. – S.K. Venkat Aug 02 '16 at 08:18
  • Plz read this article and follow it : http://stackoverflow.com/help/how-to-ask – S.K. Venkat Aug 02 '16 at 08:21
  • S.K.Venkat, it's not task at all..!! We have very good interface for date picker but it's just want to know is it possible only using jQuery Datepicker without changing too much code? – user6648120 Aug 02 '16 at 08:31
  • Thanks for concerning my comment and updated the question. Now it looks good and appreciable that you have done something. This is what we expect from people. Please be patient and SO community will give a solution for the stated problem. Thanks. – S.K. Venkat Aug 02 '16 at 08:37

1 Answers1

0

No. Its not possible. The best you can do is changeYear: true which you have already done.

enter image description here

But if you are using bootstrap, it has plugin which is being actively maintained in Github with the same functionality.

Link: https://github.com/eternicode/bootstrap-datepicker

Community
  • 1
  • 1
naveen
  • 53,448
  • 46
  • 161
  • 251
  • Unfortunately, we are not using bootstrap. Anyways, thanks for the suggestion.. :) – user6648120 Aug 02 '16 at 08:51
  • bottomline is, you *cannot achieve* this with UI datepicker with a bit of code. – naveen Aug 02 '16 at 08:53
  • I found Addon having similar functionality and it works for me. Here is the link https://github.com/silverskater/jQuery-UI-Datepicker-MonthYearPicker-Addon. And I don't need to change my code... :) – user6648120 Aug 03 '16 at 06:24
  • Thats quite a nice find. Thanks. I can use it sometime too. :) – naveen Aug 03 '16 at 06:50