Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Have form that when clicked needs to have calendar date picker

Posted on 2008-10-08
1
431 Views
Last Modified: 2012-05-05
Need a ColdFusion solution.

 I have a form used for scheduling.  The end user needs to pick a beginning date and end date.  My goal is to do something like any of the travel sites do for those fields.  For instance orbitz.com.  When you click on the "leave" or "return" fields a small square window with a calendar pops up.  When the date is selected it's submitted with the rest of the form.  

I can't attach a code snippet as I have no idea how to do this.  

Thanks for your help!


0
Comment
Question by:IRHusker
1 Comment
 
LVL 27

Accepted Solution

by:
azadisaryev earned 500 total points
ID: 22674974
there are literally hundreds of available solutions for this. just googling "lavascript popup calendar" will bring many good solutions.
if you are on cf8, it has one built in if you use <cfinput type="datefiled">. however, i find that one quiet a bit limited and not easily customized. but it works.

the one i love best and use most is the jQuery UI datepicker:
http://docs.jquery.com/UI/Datepicker for general info
http://ui.jquery.com/repository/latest/demos/functional/#ui.datepicker for an excellent demo and code samples

in its most simple form all you need is:
1) download jqeury js library from http://docs.jquery.com/Downloading_jQuery
2) download jQuery UI library from http://ui.jquery.com/,
or just the datepicker (that's all you really need from the UI library) from http://marcgrabanski.com/pages/code/jquery-ui-datepicker
3) add
<script src="path/to/jquery.js"></script>
<script src="path/to/ui.datepicker.js"><script>
<link rel="stylesheet" href="path/to/ui.datepicker.css" type="text/css" />
<script>
$(document).ready(function(){
  $("#id_of_your_date_form_field").datepicker();
});
</script>

that's it.

the demos and examples page i mentioned above will show you how to customize it in any which way you want.

hth
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

808 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question