Hello Reader's if you want to make ajax html form that takes two dates from user and print then daily or yearly or monthly then you can my code as below:-
Lets say the html form, the code will go like this.
<div class="form-group clearfix">
<div class="checkbox checkboxRecuring text-right">
<label><input type="checkbox">Recuring</label>
</div>
<div class="recuringOptions pull-right">
<div class="optionColumn">
<strong>-- Option 1 --</strong><br/>
<label>
<input type="text" name="date_start" id="date_start" value="08/20/2014 09:22 -0400" />
<span class="input-group-addon">
<i class="calandarIcon calandarIconSM"></i>
</span>
</label>
<label>
<input type="text" name="date_end" id="date_end" value="08/21/2014 08:00 -0400" />
<span class="input-group-addon">
<i class="calandarIcon calandarIconSM"></i>
</span>
</label><br/>
<label>
<span class="pull-left">Iterval:</span>
<select id="interval" name="interval" onchange ="MakeIntervals()" class="form-control">
<option value="" selected="">By Interval</option>
<option value="Hourly">Hourly</option>
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</select>
</label>
</div>
<div class="optionColumn">
<textarea class="form-control" cols="35" rows="4" id="dateValue"></textarea>
</div>
<div class="optionColumn">
<strong>-- Option 2 --</strong><br/>
<span>Select dates individually: </span><br/>
<input type="button" value="" class="calandarIcon calandarIconSM" id='option2'>
</div>
Now I have write the script to generate the date as below:-
<script>
function MakeIntervals() {
var date_start = document.getElementById("date_start").value;
var date_end = document.getElementById("date_end").value;
var interval = document.getElementById("interval").value;
var Date1 = new Date(date_start);
var Date2 = new Date(date_end);
if(interval == 'Hourly')
{
// var interval_by = 60*60*1000; // hours*minutes*seconds*milliseconds a hour
}else if( interval == "Daily") {
var Date_value = new Array();
var i = 0;
while(Date1 <= Date2)
{
Date_value[i] = Date1.toString();
var newDate = Date1.setDate(Date1.getDate() + 1);
Date1 = new Date(newDate);
++i;
}
$("#dateValue").val(Date_value);
//var interval_by = 24*60*60*1000; // hours*hours*minutes*seconds*milliseconds a day
}else if( interval == "Weekly") {
//my login is to get only the multiple values of 7 and make them into array.
var Date_value = new Array();
var Week_value = new Array();
var i = 0;
while(Date1 <= Date2)
{
Date_value[i] = Date1.toString();
var newDate = Date1.setDate(Date1.getDate() + 1);
Date1 = new Date(newDate);
++i;
}
for(k=0;k<=Date_value.length;)
{
Week_value[k] = Date_value[k];
k=k+7;
}
//console.log(Week_value);
$("#dateValue").val(Week_value);
}else if( interval == "Monthly") {
var Date_value = new Array();
var Month_value = new Array();
var i = 0;
while(Date1 <= Date2)
{
Date_value[i] = Date1.toString();
var newDate = Date1.setDate(Date1.getDate() + 1);
Date1 = new Date(newDate);
++i;
}
for(k=0;k<=Date_value.length;)
{
Month_value[k] = Date_value[k];
k=k+30;
}
// console.log(Month_value);
$("#dateValue").val(Month_value);
}else if( interval == "Yearly") {
var Date_value = new Array();
var Year_value = new Array();
var i = 0;
while(Date1 <= Date2)
{
Date_value[i] = Date1.toString();
var newDate = Date1.setDate(Date1.getDate() + 1);
Date1 = new Date(newDate);
++i;
}
for(k=0;k<=Date_value.length;)
{
Year_value[k] = Date_value[k];
k=k+365;
}
//console.log(Year_value);
![alt text][1]
$("#dateValue").val(Year_value);
}else{
var interval_by = 0;
}
var diffDays = Math.round(Math.abs((Date1.getTime() - Date2.getTime())/(interval_by)));
//console.log(diffDays);
}
</script>
Now when user send the two date a text box will show the dates between then aalt textnd you can it in my screen shot as well
0 Comment(s)