E-mailed you with a dropbox link to the code, many thanks for your help.

Many thanks for your reply, that fixed the problem.

Just one quick additional problem is it possible to default my date-picker to -10 days by default and allow the user to specify a date range?

I can’t see a way to do this in the jQuery UI without to fields

Many thanks and assure you I won’t bother you any more after that.

Thanks.

Hi Will,

Many thanks for the reply, I’ve taken a look at the site you selected and downloaded the code, but I’m having issues targeting it into Guriddo, I’ve tried the following:

1. Targeting gs_alert_time directly, the result works reasonably well, but I cannot seem to be able to submit the form
2. Inject the code into the gs_alert_time using appendTo, trouble is here that the code doesn’t get called

Any ideas?  It would be good to have this natively in the solution at some point as a feature request.

<script>
$.datepicker._defaults.onAfterUpdate = null;
var datepicker__updateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function( inst ) {
datepicker__updateDatepicker.call( this, inst );
var onAfterUpdate = this._get(inst, ‘onAfterUpdate’);
if (onAfterUpdate)
onAfterUpdate.apply((inst.input ? inst.input[0] : null),
[(inst.input ? inst.input.val() : ”), inst]);
}
$(document).ready(function() {
var cur = -1, prv = -1;
$(‘

<input id=”jrangeinput”>

‘).appendTo(‘#gs_alert_time’);

$(‘#jrange div’)
.datepicker({
//numberOfMonths: 3,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
defaultDate: -10,
setDate: ’10-Jul-2016′,
maxDate: 0,
beforeShowDay: function ( date ) {
return [true, ( (date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? ‘date-range-selected’ : ”)];
},
onSelect: function ( dateText, inst ) {
var d1, d2;
prv = cur;
cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime();
if ( prv == -1 || prv == cur ) {
prv = cur;
//$(‘#jrange input’).val( dateText );
$(‘#jrange input’).val( $.datepicker.formatDate( ‘dd-M-y’, new Date(Math.min(prv,cur)), {} ));
} else {
d1 = $.datepicker.formatDate( ‘dd-M-y’, new Date(Math.min(prv,cur)), {} );
d2 = $.datepicker.formatDate( ‘dd-M-y’, new Date(Math.max(prv,cur)), {} );
$(‘#jrange input’).val( d1+’ to ‘+d2 );
}
},
onChangeMonthYear: function ( year, month, inst ) {
//prv = cur = -1;
},
onAfterUpdate: function ( inst ) {
$(‘<button type=”button” class=”ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all” data-handler=”hide” data-event=”click”>Done</button>’)
.appendTo($(‘#jrange div .ui-datepicker-buttonpane’))
.on(‘click’, function () { $(‘#jrange div’).hide(); });
}
})
.position({
my: ‘left top’,
at: ‘left bottom’,
of: $(‘#jrange input’)
})
.hide();

$(document).ready(function(){
// Populate the inputbox by default
var dateload = $(‘#jrange div’).datepicker(‘getDate’);
var dateload2 = $.datepicker.formatDate( ‘dd-M-y’, dateload);

$(‘#jrange input’).val(dateload2);
});

$(‘#jrange input’).on(‘focus’, function (e) {
var v = this.value,
d;
try {
if ( v.indexOf(‘ to ‘) > -1 ) {
d = v.split(‘ to ‘);
prv = $.datepicker.parseDate( ‘dd-M-y’, d[0] ).getTime();
cur = $.datepicker.parseDate( ‘dd-M-y’, d[1] ).getTime();
} else if ( v.length > 0 ) {
prv = cur = $.datepicker.parseDate( ‘dd-M-y’, v ).getTime();
}
} catch ( e ) {
cur = prv = -1;
}
if ( cur > -1 )
$(‘#jrange div’).datepicker(‘setDate’, new Date(cur));
$(‘#jrange div’).datepicker(‘refresh’).show();
});
});
</script>

• This reply was modified 9 years, 9 months ago by trevrobwhite.
• This reply was modified 9 years, 9 months ago by trevrobwhite.