Date Picker

[piper338]

Could someone help me get my date picker working?

http://dev.flyvva.org

Thanks,

Chad C.

[Nabeel]

You can use the one included with jquery-ui:

http://ui.jquery.com

[piper338]

You can use the one included with jquery-ui:

http://ui.jquery.com

Ok thanks, I have mootools installed now for my login I gotta do some research I never got into the Java thing.

[Nabeel]

phpVMS uses jquery, it's included by default and uses it for many things including schedules. So to make it easy, I'd use jquery plugins

[piper338]

phpVMS uses jquery, it's included by default and uses it for many things including schedules. So to make it easy, I'd use jquery plugins

Pardon my ignorance but if it's already installed do I just need to add the code where I want it?

EX.

<script type="text/javascript">

$(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 -->

[piper338]

Ok so I am trying to figure this out I went to the javascript.tpl and saw <script src="lib/js/jquery-1.2.pack.js"></script>

in lib/js there is no 1.2.pack should it be there?

[Nabeel]

Nope, it's alreayd included, a newer version. Yes, that demo should work...

[piper338]

Nope, it's alreayd included, a newer version. Yes, that demo should work...

Ok, thanks I think I got it figured out now. In my header.tpl I was trying to call an older Jquery that I had installed, I took all the old stuff out of my header and it works now. Just gotta work on the css.

[piper338]

Ok, thanks I think I got it figured out now. In my header.tpl I was trying to call an older Jquery that I had installed, I took all the old stuff out of my header and it works now. Just gotta work on the css.

What would be the solution for having more than one input that needs a date picker?

<input type="text" id="datepicker">

is there a way to use a class rather than an ID?

[piper338]

What would be the solution for having more than one input that needs a date picker?

<input type="text" id="datepicker">

is there a way to use a class rather than an ID?

Ok I think I figured away around it I used the from-to script

Not sure if this is a good way to do it, but it works. Sometimes I just need to talk to myself on these forms to get through my problems lol

<script type="text/javascript">

$(function() {

var dates = $('#from, #to').datepicker({

defaultDate: "+1w",

changeMonth: true,

numberOfMonths: 1,

onSelect: function(selectedDate) {

var option = this.id == "from" ? "minDate" : "maxDate";

var instance = $(this).data("datepicker");

var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);

dates.not(this).datepicker("option", option, date);

}

});

});

</script>

[Guest N402KC]

Dont use a class when using Inputs, Use ID, Its easier to work with as you will find out.

[Nabeel]

Dont use a class when using Inputs, Use ID, Its easier to work with as you will find out.

No, if you're binding to multiple fields, ALWAYS use a class, you can't have duplicate IDs.

You can do:

<input type="text" class="datepicker" name="..." value="" />

Then the javascript:

$('.datepicker').datepicker({ your options });

The $('.datepicker') picks out any elements with the datepicker class, and applies the datepicker to it. The selector is the same as CSS. Right now you're doing #from, #to which is fine, but you can also use the above if you're using more fields (I think entering more fields in that manually is a bit cumbersome).

Also, if you place any of your optional javascript in your footer (ie, just above the </body> tag), you don't need to have a $(document).ready() call to put them into.