Forums

Hi
I have spent many hours now searching through here without success unfortunately.
Here's my question.
I have 4.0 RC3.5 on j 2.5.6 and have a form which works very well.
I am trying to get some of the user input values to write to the form before submit and have become stuck with the datetime picker.
I would like to extract just the date part of the returned string so that I can do a 'diff' on the days entered, i.e. number of days between selected dates.
I need the time picker function too so separating them would not be ideal.
I have tried

$('DropOff').addEvent('change', function() {
var start = $('DropOff').value;

start returns 23-09-2012 14:48:36, I just need 23-09-2012

Any pointers would be gratefully received.
Cheers

Hi clunky,

The quick answer is that this should give you the string you need.

var start = $('DropOff').value.split(' ')[0];

A better answer would be to access the Date object that the DatePicker creates but right now I can't work out how to do that as ChronoForms doesn't assign a name to it.

Bob

Hi Bob
Thanks for getting back to me.
Using your idea for the two input fields,

var start = $('DropOff').value.split(' ')[0];

and

var end = $('Collection').value.split(' ')[0];

I have tried to implement this like so...

var diff = (end - start);
alert("diff "+diff);
var days = diff/1000/60/60/24;
days=Number(days+1);
alert(days);

Unfortunately I get NaN for both the alerts.
I have got the start and end values to show on alerts just fine with only the date part showing, but maybe the date format itself is not allowing it to be diff'ed? Whitespace somewhere?
Cheers

Update1

If I set

var diff = new Date(end - start);

I get Invalid Date in the diff alert.
Maybe it is string related, i.e. it displays 23-09-2012 but it is really 23/09/2012?

Update 2

If I change the datetime picker to just a date picker the date format changes to 2012-09-23, and allowing for this change in my js and using

var start = $('DropOff').value; and var end = $('Collection').value;

, the 'diff' calculation still doesn't work.
Having a nightmare with this....

Hi clunky,

The code I posted just gives you a string you still need to convert that into a JavaScript date object:

var start, end, diff;
start = $('DropOff').value.split(' ')[0];
start = new Date().parse(start);
end = $('Collection').value.split(' ')[0];
start = new Date().parse(end);
diff = start.diff(end, 'day');

I suspect that you may need to change the date part of the format to mm-dd-yyyy or yyyy-mm-dd to get this to work correctly.

Bob

Hi Bob
That's cool.
Just wondered about your last comment re date format.
I really don't understand this bit.
I have made all this work with jquery mobile for a mobile app but now I am stuck with this.
I have been searching all over google and have tried some stuff but it's not working.
Based on the fact that with the time picker included the date format changes, how do I format the date here?
Cheers

Hi clunky,

Finger problems this evening - that should read "I suspect that you may need to change the date part of the format to mm-dd-yyyy or yyyy-mm-dd to get this to work correctly." (That is - it may not parse dd-mm-yyyy dates correctly.)

I've updated the original post.

Bob

Hi Bob
I did kind of understand your words, however I don't understand how to do what you are suggesting with the format date bit.
Cheers

Hi clunky,

Dates can be ambiguous. '03-04-2012' would probably be March 4 in the USA i.e. 'mm-dd-yyyy'; and it would be 3 April i.e. 'dd-mm-yyyy' in Europe and much of the rest of the world.

As far as I can see the code you have is assuming the US format.

You can remove the ambiguity by using the format 'yyyy-mm-dd' because '2012-04-03' is always March 3.

Bob

Hi Bob
I have it working.... kind of!

window.addEvent('domready', function() {

$('Agree').addEvent('click', function() {
var start, end, diff;
start = $('DropOff').value.split(' ')[0];
start2 = new Date().parse(start);
//alert("start  "+start);
end = $('Collection').value.split(' ')[0];
end2 = new Date().parse(end);
//alert("end "+end);
diff = (end2-start2);
//alert("diff "+diff);

if ( $('parking_0').checked ) {
  var parking=$('parking_0').value;
//alert("Parking "+parking); //5
}
if ( $('parking_1').checked ) {
  var parking=$('parking_1').value;
//alert("Parking "+parking); //3
}
var total=10+(diff*parking); add the parking fee of 10 to the number of days x rate
$('showresults').innerHTML ="You are parking for "+(diff)+" days, from "+start+" to "+end+" inclusive at a cost of €"+parking+" per day. Your Total Parking Fee is € "+total+".";
});


});

That is what is running at present.
Unfortunately it only works for dates within the same month??
If dates span two different months it goes haywire.
If I alert the start2, it shows a default date of jan 1st 1970 or similar.

This date stuff is driving me crazy!
Cheers
PM'd the url if it helps🙂

Really struggling with this....
For the life of me I cannot get the dates to go through the next month to give me the number of days.
You mention setting the format for the date but I don't understand this at all.
I seem to have tried loads of combinations and got nowhere.
If you get a chance to have a look Bob it would be greatly appreciated.
Cheers

Hi clunky,

I have this working here

This form uses two MooTools Datepickers with ids 'start_date' and 'end_date' and a message span with an id of 'diff'. Here's the JavaScript which is in a Load JS action before:

var start, end, diff;

  function checkDiff() {
    start = $('start_date').value.split(' ')[0];
    start = new Date().parse(start);
    end = $('end_date').value.split(' ')[0];
    end = new Date().parse(end);
    diff = start.diff(end, 'day');
    if ( diff == 0 ) {
      $('diff').set('html', 'Please select both dates');
    } else if ( diff < 0 ) { 
      $('diff').set('html', 'Please make end date after start date');
    } else {
      $('diff').set('html', 'Difference is '+diff+' days');
    }
  }
window.addEvent('domready', function() {
  $('start_date').addEvent('change', checkDiff);
  $('end_date').addEvent('change', checkDiff);
});

Bob

Hi Bob
Yep that works, and now that I have made mine just date pickers, without the time element, they work too!!!
I have noticed the default settings for the datepickers, and wonder why the formats are different?

window.addEvent('load', function() {
		
			new Picker.Date($$('.cf_date_picker'), {
			pickerClass: 'datepicker_dashboard', format: '%Y-%m-%d', allowEmpty: true, useFadeInOut: !Browser.ie
			});
			
			new Picker.Date($$('.cf_datetime_picker'), {
			pickerClass: 'datepicker_dashboard', format: '%d-%m-%Y %H:%M:%S', timePicker: true, allowEmpty: true, useFadeInOut: !Browser.ie
			});
			
			new Picker.Date($$('.cf_time_picker'), {
			pickerClass: 'datepicker_dashboard', format: '%H:%M:%S', pickOnly: 'time', allowEmpty: true, useFadeInOut: !Browser.ie
			});
			
		});

namely --- format: '%Y-%m-%d'
and --- format: '%d-%m-%Y %H:%M:%S'

I have also noticed that now with just date pickers, I can go back to the date to change it and it doesn't default to January 1970!!

Hi clunky,

The formats are different to match the date only / time only / date + time settings.

Bob

Wouldn't it have been easier to have the same date format throughout?
Its been a real pain trying to use the datetime picker, just because of the different date format.

Anyway, just my 2 cents🙂