Jason's Date Input Calendar

[siecool]

Hello,
with Jason's Date Input Calendar, http://www.dynamicdrive.com/dynamici...oncalendar.htm, how can I retrieve the value of the selected date in a variable?
Thank you.

[jscheuer1]

Get a reference to the hidden field that contains the date and get its value. There are many ways to do that. They all would use the name that you created the calendar with. So, say you made a calendar like so:

<script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

The most direct method, assuming there are no other elements or calendars on the page with the 'orderdate' name, would be:

var myvar = document.getElementsByName('orderdate')[0].value;

Generally you will not need this though because, if the 'orderdate' calendar is in a form, and if that form is submitted, then the POST or GET value of ['orderdate'] will be the currently selected date.

But, of course if you do need it in javascript you need to do that each time you want it, as it might have changed. You could set an interval.

But, if I do (in Chrome's developer tools):

console.log(orderdate_Object.picked)

I get this information:

storedMonthObject {
	date: Fri Aug 02 2013 00:00:00 GMT-0400 (Eastern Daylight Time)
	day: 2
	dayCount: 31
	dayPad: "02"
	firstDay: 4
	formatted: "02-AUG-2013"
	fullName: "August 2013"
	monthIndex: 7
	monthName: "August"
	monthPad: "08"
	monthShort: "AUG"
	yearPad: "2013"
	yearValue: 2013
}

So, in real time you could skip the myvar part, and wherever you wanted this value you could represent it as:

orderdate_Object.picked.formatted

or:

orderdate_Object.picked.day + ' ' + orderdate_Object.picked.fullname

or whatever exactly you want to retrieve from the picked object.

Why do you want this, what are you planning on doing with it?

[Beverleyh]

Pretty much like any other form, I would say - you would post the form and retrieve the value from the named field.

From the DD demo page;

<script>DateInput(DateName, Required*, DateFormat*, DefaultDate*)</script>

DateName: STRING - required. Name of the hidden form element to store the selected, formatted date You do NOT need to create this field manually in your form.

So this is the name you retrieve when the form is posted;

$datename = $_POST['DateName']; // change to whatever name you've used in the JavaScript ('DateName' is just used in the demo)
echo $datename;
// would output something like " 02-Aug-2013 " if the DateFormat parameter is set as " DD-MON-YYYY " 

If you need more help, please post a link to your page. Your form processing script may also be required.

EDIT: John and I are posting at the same time (I am obviously much slower on the keyboard) but I think our posts collectively provide a nicely rounded explanation and other available options.

[siecool]

Thank you. But How to put two different calendars on the same page?

[Beverleyh]

Just use a different DateName in each JavaScript call.

[vwphillips]

create a new global variable

var orderdateV='not set'

where orderdate if parameter 0 of the call DateInput('orderdate', true, 'DD-MON-YYYY') + 'V'

the html

<form>
<input type="button" name="" value="Test" onmouseup="alert(orderdateV);" />
<script>DateInput('orderdate', true, 'DD-MON-YYYY')</script>

<input type="button" onClick="alert(this.form.orderdate.value)" value="Show date value passed">

</form>

add the line in red

// Sets the form elements after a day has been picked from the calendar
function PickDisplayDay(ClickedDay) {
   this.show();
   var MonthList = this.getMonthList();
   var DayList = this.getDayList();
   var YearField = this.getYearField();
   FixDayList(DayList, GetDayCount(this.displayed.yearValue, this.displayed.monthIndex));
   // Select the month and day in the lists
   for (var i=0;i<MonthList.length;i++) {
      if (MonthList.options[i].value == this.displayed.monthIndex){
       MonthList.options[i].selected = true;
      }
   }
   for (var j=1;j<=DayList.length;j++) {
      if (j == ClickedDay) DayList.options[j-1].selected = true;
   }
   this.setPicked(this.displayed.yearValue, this.displayed.monthIndex, ClickedDay);
   // Change the year, if necessary
   YearField.value = this.picked.yearPad;
   YearField.defaultValue = YearField.value;
   window[this.hiddenFieldName+'V']=[MonthList.value,ClickedDay,this.picked.yearPad];
}