How do I convert this to JavaScript from PHP?
Question
How can I do this in Javascript/jQuery from PHP? I am trying to populate a select list from a start date up to 6 months in advance.
$startDate = intval( $c->getStartDate($pid) );
$endDate = strtotime('+6 month', $startDate);
$dateSelectList = '<select name="dateSelect" id="dateSelect">';
$count = 1;
//populates the select list with the starting date of the course up to the next six months
for($date = $startDate; $date <= $endDate ; $date = strtotime('+1 day', $date))
{
$dateSelectList .= '<option id="select'.$count.'" value="'.$date.'">'.date('D d F Y', $date).'</option>';
$count++;
}
$dateSelectList .= '</select>';
3 answers
solution1
3 ACCPTED 2012-03-26 17:20:25
One way you can do this is to use ajax with jQuery. So first step is to modify your code to:
$startDate = intval( $c->getStartDate($pid) );
$endDate = strtotime('+6 month', $startDate);
$dateSelectList = '';
$count = 1;
//populates the select list with the starting date of the course up to the next six months
for($date = $startDate; $date <= $endDate ; $date = strtotime('+1 day', $date))
{
$dateSelectList .= '<option id="select'.$count.'" value="'.$date.'">'.date('D d F Y', $date).'</option>';
$count++;
}
echo $dataSelectList;
then save into a separate file say populate.php
Then on the html page you write the following code. Code assumes you have included jquery to your page and that you have a select element with id = dateSelect
<script>
$(function(){
$.get('populate.php',function(data)
{
$('#dateSelect').html(data);
}
});
</script>
The above code calls populate.php on load of the page, which returns all the options and injects it into the select element
solution2
1 2012-03-26 17:56:28
Here is my attempt at a php -> javascript port of your code. The exact number of days in a 6 month period depends on the start and end dates of that period so if you need an exact 6 month range, you will need to do more calculations based on the number of days in each of the months involved. The code below assumes 182 days in the 6 month time-frame.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<script>
function newOption(value, text) {
var opt = document.createElement('option');
opt.text = text;
opt.value = value;
return opt;
}
function formatDate(date) {
var da = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
ma = ['January','February','March','April','May','June','July','August','September','October','November','December'],
dr = date.getDate(),
wr = date.getDay(),
mr = date.getMonth(),
yr = date.getFullYear(),
dn = da[wr],
ds = (dr.toString().length == 1) ? '0' + dr.toString() : dr.toString(),
mn = ma[mr],
ys = yr.toString(),
v = dn + ' ' + ds + ' ' + mn + ' ' + ys;
return v;
}
function PopulateDateSelector(startDate, endDate, selector) {
while(selector.length > 0) selector.remove(0);
while(startDate < endDate) {
selector.add(newOption(startDate.getTime().toString(), formatDate(startDate)));
startDate.setTime(startDate.getTime() + (24*60*60*1000));
}
}
</script>
<body>
<select id="dateSelector"></select>
<script type="text/javascript">
var s = document.getElementById('dateSelector'),
startDate = new Date(),
endDate = new Date(startDate.getTime() + (182*24*60*60*1000));
//182 is estimated number of days in a 6 month period.
PopulateDateSelector(startDate,endDate,s);
</script>
</body>
</html>
solution3
1 2012-03-26 17:56:35
The which you search should to be more or less it:
<html>
<head>
<title>Demo Javascript populing select field</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" >
$("document").ready(function(){
nElement = 6;
sList = {};
for (i = 0; i<=nElement; i++) {
var now = new Date();
var nextDate = new Date();
nextDate.setMonth(now.getMonth()+(i*6));
var value = nextDate.getMonth()+"/"+nextDate.getFullYear();
sList[value] = value;
}
$.each(sList, function(key, value){
var option = $("<option></option>").attr("value",key).text(value);
$("#demo-select").append(option);
});
});
</script>
</head>
<body>
<select name="demo-select" id="demo-select" ></select>
</body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.