Jump to content




Recent Status Updates

  • Photo
      30 Sep
    rhossis

    laptop hard disk seated beneath motherboard but with no access panel. 7 hours to replace :(

    Show comments (3)
  • Photo
      19 Sep
    Chall

    I love it when you go to write a help thread, then while writing, you reach an enlightenment, and figure it out yourself.

    Show comments (3)
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
  • 472 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
  • 472 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