Date/Time Picker as Dropdown list??

Dear Bob/Max,

Hi there. I'm quite sure that what I have been asking has been answered
on this site several times. I could not just find the post related to my question.

I would just like to know if it's possible to change the date/time picker format(currently inputfield with a calendar) to a drop down list for day,month and year?

If it's possible could you please provide a solution how if there's any way?

thank you in advanced!!

Chronoforms rocks!

Many,many thanks,
mvsx

Hi mvsx,

There are two ways to do this- both require work on your part.

[list]

You can create a set of three dropdowns and combine them into a single date in the OnSubmit Before Box (or with JavaScript in the browser).

You can create a custom Aeron calendar which links to 3 drop-downs if you want to keep the picker (see the docs on the Aeron Calendar site).

[/list]

Bob

Hi Greyhead,

Thank you for the swift response!

I think I'm going to go for the first method by adding scrip on before submit.

Would it be possible for you to provide sample code for that if you have any at the moment?
Sorry i'm a bit newbie to this.

Thank you very much I appreciate your help. I think has been my 4th post and
the past ones has always been resolved. 🙂
mvsx

Hi mvsx,

Here's an example that uses both approaches - you can probably modify it for your needs. Form HTML

<div class="form_item" id='date_holder'>
  <div class="form_element cf_multiholder" style="margin-left:0px!important;">
  	<label class="cf_label" style="width: 150px;">Date</label>
    <table cellspacing="0" cellpadding="0" width="95%" title="" class="multi_container">
        <tbody width="100%">
            <tr width="100%">
                <td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Day</label>
    <select class="cf_inputbox" id="day" size="1" title=""  name="day">
    <option value="">Choose Option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>
</td>
<td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Month</label>
    <select class="cf_inputbox" id="month" size="1" title=""  name="month">
      <option value="">Choose Option</option>
      <option value="1">Jan</option>
      <option value="2">Feb</option>
      <option value="3">Mar</option>
      <option value="4">Apr</option>
      <option value="5">May</option>
      <option value="6">Jun</option>
      <option value="7">Jul</option>
      <option value="8">Aug</option>
      <option value="9">Sep</option>
      <option value="10">Oct</option>
      <option value="11">Nov</option>
      <option value="12">Dec</option>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>
</td>
<td style="width: auto; vertical-align: middle; text-align: left;">
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Year</label>
    <select class="cf_inputbox" id="year" size="1" title=""  name="year">
      <option value="">Choose Option</option>
      <option value="2010">2010</option>
      <option value="2011">2011</option>
      <option value="2012">2012</option>
    </select>
  </div>
  <div class="cfclear"> </div>
</div>
</td>
            </tr>
        </tbody>
    </table>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Date</label>
    <input class="cf_inputbox" maxlength="150" size="30" title="" id="date" name="date" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

and the Form JavaScript

window.addEvent('domready', function() {
  myCal = new Calendar( { 
    year: { year: 'Y', month: 'm', day: 'd' } },
    { classes: ['dashboard'],
      onHideComplete : function() {
        $('date').value = $('day').value+'/'+$('month').value+'/'+$('year').value;
      }  
    }
  );
  $('date_holder').addEvent('click', function(){
    $('date').value = $('day').value+'/'+$('month').value+'/'+$('year').value;
  });
});

Notes:
[list=a]

the id ttributes are important to make the scripts work;

you'll need to add the full set of day options if you don't use the script (the calendar script will fill in the blanks for you if you use it).

I've used the multi-holder element to line up the drop-downs - the layout could be improved!

[/list:o]

Bob

Dear Greyhead,

Sorry for the delayed response. Wow I didn't expect
you'd be doing this. You did walk an extra mile with this.
This has been very helpful and it works on the site I'm working at.

Thank you so much, I owe you a beer. 🙂

Many thanks,
mvsx

hI!

Can I set/select (with code) a specific date at datetimepicker??

Hi CMG27,

I've just written this short FAQ to answer this question.

Bob