pickmeup plugin of jquery not working

I want the calendar to show as soon as I click the input textbox. I searched everywhere but couldn't get any help. I would be really appreciated if you will help me as I am a beginner.

Here is my code:

<link href="CSS_File/StyleSheet.css" rel="stylesheet" />
<link href="CSS_File/pickmeup.min.css" rel="stylesheet" />
<script type="text/javascript">
    $(document).ready(function () { 
        $(function () { 
            $('.Reservation .demo').pickmeup({ flat: true }); 
            var input= $('input'); 
            input.pickmeup({ position: 'right', before_show: function(){
                input.pickmeup('set_date', input.val(), true);
            }, change: function(formated){
                input.val(formated);
            }});
        }); 
    });
</script>
This is my asp.net code
<div class="Reservation"> 
    <p style=" float:left; font-size:24px;">Check In:</p> &nbsp;
    <input  type="text" style="width: 160px; height: 22px" value="17-11-2013" /> 
</div>

Answers 1

  • I've gone through with your code and this library, now the mistake you are making is you are using this library as jQuery plugin, this is not jQuery based plugin, that's why if you want to initialize the calendar with your input then use it like this: pickmeup('input', <optionObj>);,

    Also one of your line is not making any kind of sense, as your requirement is to display the calendar when user click on input, and the line of code which you written :

    $('.Reservation .demo').pickmeup({ flat: true })
    

    first of all there is no demo class under Reservation dom, and another thing is as per the pickupme framework, if you want to show a calnder on UI (which will replace your UI element with the calander) then you need to initilize it same not as jquery plugin, below example

    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
    <script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function () {
            pickmeup('.Reservation',{ flat: true });         
        });
    </script>
    This is my asp.net code
    <div class="Reservation"></div> <!-- it will replaced as calander on UI -->

    BTW, here your Code, which I refined and it is started showing calendar:

    Solution:

    <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="https://rawgit.com/nazar-pc/PickMeUp/master/css/pickmeup.css" rel="stylesheet"/>
    <script type='text/javascript' src="https://rawgit.com/nazar-pc/PickMeUp/master/dist/pickmeup.min.js" ></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //$('.Reservation .demo').pickmeup({ flat: true }); 
            var input= $('input'); 
            pickmeup('input',{ position: 'right', before_show: function(){
                input.pickmeup('set_date', input.val(), true);
            }, change: function(formated){
                input.val(formated);
            }});
        });
    </script>
    This is my asp.net code
    <div class="Reservation"> 
        <p style=" float:left; font-size:24px;">Check In:</p> &nbsp;
        <input  type="text" style="width: 160px; height: 22px" value="17-11-2013" /> 
    </div>


Related Articles