How to set the initial date of a jquery datepicker from php

Question

In my php file I have:

$startDate = new DateTime('2013-08-15');
$endDate = new DateTime('2013-10-15');
echo '<div id="filterStartDate">Start Date:</div>';
echo '<div id="filterEndDate">End Date:</div>';

Then in the javascript I have:

$('#filterStartDate').datepicker({
    changeMonth:true,
    changeYear:true,
    dateFormat:'yy-mm-dd',
    onSelect: function( selectedDate ) {
        $( "#filterEndDate" ).datepicker( "option", "minDate", selectedDate );
    }
});
$('#filterEndDate').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'yy-mm-dd',
    onSelect: function( selectedDate ) {
        $( "#filterStartDate" ).datepicker( "option", "maxDate", selectedDate );
        alert($("#filterEndDate").val());
    }
});

I would like to know if there is a way to set the initial date on the datePicker from PHP. I know I could generate the javascript from within php, but I think that is messy and would like to keep the separation. It would be awesome if there were something like:

echo '<div id="filterStartDate" value="'.$startDate->format('Y-m-d').'">Start Date:</div>';

adeneo · Accepted Answer · 2013-09-12 22:40:46Z

You can use data attributes :

$startDate = '2013-08-15'; // new dateTime() returns an object, you need a string
$endDate   = '2013-10-15';

echo '<div id="filterStartDate" data-date="'.$startDate.'">Start Date:</div>';
echo '<div id="filterEndDate" data-date="'.$endDate.'">End Date:</div>';

and then just get them in the JS:

$('#filterStartDate').datepicker({
    changeMonth:true,
    changeYear:true,
    dateFormat:'yy-mm-dd',
    defaultDate: $('#filterStartDate').data('date'), // get data attribute
    onSelect: function( selectedDate ) {
        $( "#filterEndDate" ).datepicker( "option", "minDate", selectedDate );
    }
});
$('#filterEndDate').datepicker({
    changeMonth: true,
    changeYear: true,
    dateFormat:'yy-mm-dd',
    defaultDate: $('#filterEndDate').data('date'),
    onSelect: function( selectedDate ) {
        $( "#filterStartDate" ).datepicker( "option", "maxDate", selectedDate );
        alert($("#filterEndDate").val());
    }
});

raina77ow · Accepted Answer · 2013-09-12 22:34:49Z

1

You can use data attributes for that:

?>
<div id="filterStartDate" data-initial="<?= $startDate->format('Y-m-d') ?>">
  Start Date:
</div>
<?php // here goes the rest of the code

... then collect it by JS, via ...

var initialStartDate = $('#filterStartDate').data('initial');

... then send it to datepicker (as defaultDate option).

answered Sep 12, 2013 at 22:34

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Comments

alanmanderson · Accepted Answer · 2013-09-12 22:34:12Z

0

I suppose one solution is to not use the inline option of the calendar and use an input instead. That way I could use:

echo '<input type="text" id="filterStartDate" value="'.$startDate->format('Y-m-d').'" />';

I am still interested if there is another way.

answered Sep 12, 2013 at 22:34

alanmanderson

8,31012 gold badges56 silver badges89 bronze badges

Collectives™ on Stack Overflow

How to set the initial date of a jquery datepicker from php

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related