Как установить начальную дату в Jquery DatePicker из PHP

Question

В моем файле PHP У меня есть:

$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>'; 

Тогда в JavaScript У меня есть:

$('#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()); 
    } 
}); 

Я хотел бы, если знаю, это способ установить начальную дату на datePicker из PHP. Я знаю, что могу генерировать javascript из php, но я думаю, что это беспорядочно и хотелось бы сохранить разделение. Было бы удивительным, если бы было что-то вроде:

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

Answer 1

Вы можете использовать данные атрибуты:

$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>'; 

, а затем просто получить их в 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()); 
    } 
}); 

Answer 2

Я полагаю, одно решение не использовать опцию встроенного календаря и использовать вход вместо этого. Таким образом, я мог бы использовать:

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

Меня все еще интересует, есть ли другой способ.

Answer 3

Вы можете использовать данные атрибуты для этого:

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

... затем собрать его JS, через ...

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

... затем отправить его в DatePicker (как defaultDate опция).