Jump to content




Recent Topics

Recent Status Updates

  • Photo
      16 Sep
    Kadence

    Some spammers sign up to CC and then they leave their account hidden so they think it won't get noticed but with an obvious name like "SaxophoneRetailSingapore" it's hard not to know they are a spam bot. #ModLife

    Show comments (3)
  • Photo
      15 Sep
    Error

    Programming is something that I enjoy and want to make a career out of. But, I usually tend to start things and not finish them. Any advice on how I can finish what I start?

    Show comments (1)
  • Photo
      12 Sep
    FacetiousTurtle33

    Just joined. Really enjoy this sight. Excited to become a great programmer, and helper.

    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
  • 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