none
How to include Date Picker control into my PDP page?? RRS feed

  • Question

  • Hii everyone, 

    i want to include Date picker control into my PDP page,and apply validation to it to not to include Past dates,for this i have included content editor webpart and placed the following Jquery onto it

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script type="text/javascript"> $(document).ready(function() {

    $( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+1M +10D" });

    }); </script>

    but nothing is coming on PDP page,if anyone has any idea plz lemme know,any help will be greatly appreciated

    thanks


    Tuesday, February 14, 2012 10:17 AM

All replies

  • Hi,

    The code above will find the id #datepicker  and then apply a JQuery datepicker to it. You need to include some html with that id. Check out the http://docs.jquery.com/UI/Datepicker overview and notice the <div id="datepicker"></div> line towards the bottom.

    I am assuming you are going to be adding this to a text custom field? If so you may need to target that specific ID of the field instead of #datepicker.

    hope this helps.


    Alex Burton
    www.epmsource.com | Twitter
    Project Server TechCenter | Project Developer Center | Project Server Help | Project Product Page

    Tuesday, February 14, 2012 10:26 AM
    Moderator
  • hi alex,

    thanks for response, i have also found the following code on the net,wheni place this in content editor webpart,i am only getting the text box

    <script>
    	$(function() {
    		$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
    	});
    	</script>
    
    
    
    <div class="demo">
    
    <p>Date: <input type="text" id="datepicker"></p>
    
    </div><!-- End demo -->
    
    
    
    <div class="demo-description">
    <p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options.  Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D').  For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
    </div><!-- End demo-description -->


    • Edited by anuj astro Tuesday, February 14, 2012 10:46 AM
    Tuesday, February 14, 2012 10:41 AM