Jump to content




Recent Status Updates

  • Photo
      18 Aug
    KodeKool

    When faced with a wall of errors and no hope to fix them, remember the following "Programs always do what you tell them to, and seldom what you want them to, but eventually you'll run out of things that can go wrong and it'll just work. and that's the secret to good programming."

    Show comments (2)
View All Updates

Developed by Kemal Taskin
Photo
- - - - -

Copy And Paste Date Picker Javascipt


  • Please log in to reply
7 replies to this topic

#1 mctim

mctim

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 110 posts

Posted 22 June 2012 - 07:08 PM

Does any one know of a good example of a date field where I click a button and it brings up a calendar and allows me to chose from the dates. I'm looking for the bare minimum work possible and I have almost 0 preference about color scheme or any other appearance related issues. I'm basically looking for a copy and paste example that works.
  • 0

#2 papabear

papabear

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 471 posts
  • Location:DarkSide

Posted 23 June 2012 - 05:24 AM

yes there is a good one that you can use.. it's already there and was build using jquery ( a javascript library ) you just have to link it into your html files
and use it :D

Please take a look at this Jquery UI DatePicker
Have some fun using it
  • 0
Life has no CTRL+Z
Never Forget To HIT "LIKE" If I Helped

#3 mctim

mctim

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 110 posts

Posted 23 June 2012 - 01:07 PM

This source was there, and I don't see any imports listed. What libraries will I need to use this?
<script>
$(function() {
  $( "#datepicker" ).datepicker();
});
</script>

<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->

  • 0

#4 papabear

papabear

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 471 posts
  • Location:DarkSide

Posted 23 June 2012 - 01:51 PM

This source was there, and I don't see any imports listed. What libraries will I need to use this?

<script>
$(function() {
  $( "#datepicker" ).datepicker();
});
</script>

<div class="demo">
<p>Date: <input id="datepicker" type="text"></p>
</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>The datepicker is tied to a standard form input field.  Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.  Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
</div><!-- End demo-description -->


you will be needing to import the Jquery UI files and the Jquery library that you can get at http://jquery.com
Please take a look into this Getting Started Guide for a good step by step instructions on how to use this cool plugin
if I'm not mistaken the imports looks like


<link type="text/css" href="css/themename/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

so you will be needing to import 3 files

the CSS of Jquery UI
the Jquery Lib
and the Jquery UI lib

Have fun :)
  • 0
Life has no CTRL+Z
Never Forget To HIT "LIKE" If I Helped

#5 mctim

mctim

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 110 posts

Posted 25 June 2012 - 08:45 AM

  $( "#datepicker" ).datepicker();

That Line is the one where I actually set the value of the text field date picker correct?
  • 0

#6 mctim

mctim

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 110 posts

Posted 25 June 2012 - 09:07 AM

Do I need to define my on focus methods? Here's my source where the methods are defined and the text fields are defined. However, when I click on the field those functions don't run. Do I need to define on-focus for the text field?
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script> 
$(function() {
$( "#start_date" ).datepicker();
});
$(function() {
$( "#end_date" ).datepicker();
});

<div id="dateField"> 
<p> 
Start Date: <input type="TEXT" 
name="start_date" id="startDate" 
value="" /> 
</p> 
<p> 
End Date: <input type="TEXT" 
name="end_date" id="endDate" 
value="" /> 
</p> 
<small>Dates Should be in the format DD/MM/YYYY</small> 
</p> 
</div> 

  • 0

#7 mctim

mctim

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 110 posts

Posted 25 June 2012 - 09:50 AM

I've also tried defining an onfocus method who calls $( "#start_date" ).datepicker(); however that seems to throw the page into an infinite loop
  • 0

#8 mctim

mctim

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 110 posts

Posted 25 June 2012 - 01:52 PM

I solved this issue. If you're interested here's another forum thread where I got some response about my issues: http://stackoverflow...not-functioning
  • 0