i have used a date picker from bootstrap. I was wondering how would i exclude the 10 days from the selected day the user has clicked
for example the user chooses 10th April 2015. That user can only select dates from 10th April 2015 - 19th April 2015 which would be the ending date.
Here is my code for the date picker.
<script type="text/javascript">
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$(function () {
$('#startdate').datetimepicker({
minDate:today,
format: 'YYYY-MM-DD HH:MM:SS'
}).change(function (selected) {
var startDate = new Date(selected.date.valueOf());
$('#enddate').datetimepicker('maxDate', startDate+10);
});
$('#enddate').datetimepicker({
minDate:today,
format: 'YYYY-MM-DD HH:MM:SS'
});
});
</script>
Option "enabledDates", disables selection of dates NOT in the array, perhaps that will work for you?
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#enableddates
Related
I am working with Kendo date picker.I am trying to disable the dates before 2000-01-01. Is it possible with Kendo date picker?
You can simply set the min value of the date picker:
// set the min date to Jan 1st, 2011
$("#datePicker").kendoDatePicker({
min: new Date(2000, 0, 1),
// other config options
});
I have a php file which I will later change into the form of an HTML file, which be current constraints are:
- Date format using Javascript.
Her script like the following snippet:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<?php
/* Set start and end dates here */
$startDate = strtotime("15 August 2012 12:00:00");
$endDate = strtotime("15 November 2012 12:00:00");
/* /Set start and end dates here */
?>
<script type="text/javascript">
$(document).ready(function(){
JBCountDown({
secondsColor : "#ffdc50",
minutesColor : "#9cdb7d",
hoursColor : "#378cff",
daysColor : "#ff6565",
startDate : "<?php echo $startDate; ?>",
endDate : "<?php echo $endDate; ?>",
now : "<?php echo strtotime('now'); ?>",
seconds : "<?php echo date("s"); ?>"
});
});
</script>
please help me to overcome it.
I want to run a php script in javascript that is being subordinated.
example:
<script type="text/javascript">
$(document).ready(function(){
JBCountDown({
secondsColor : "#ffdc50",
minutesColor : "#9cdb7d",
hoursColor : "#378cff",
daysColor : "#ff6565",
startDate : startDate, //format time in JS
endDate : endDate, //format time in JS
now : strtotime('now'), //format time in JS
seconds : date("s")
});
});
</script>
Please help,
Regards
this can all be done in javascript.
<script type="text/javascript">
$(document).ready(function(){
//http://www.convert-unix-time.com/
var unix = Math.round(+new Date()/1000); //unix timestamp for todays date
//alert(unix);
JBCountDown({
secondsColor : "#ffdc50",
secondsGlow : "none",
minutesColor : "#9cdb7d",
minutesGlow : "none",
hoursColor : "#378cff",
hoursGlow : "none",
daysColor : "#ff6565",
daysGlow : "none",
startDate : "1362096000 ", //unix timestamp for ' Friday 1st March 2013 12:00:00 AM'
endDate : "1373328000", //unix timestamp for 'Tuesday 9th July 2013 01:00:00 AM'
now : unix,
seconds : unix % 60 //unix timestamp for seconds in realtime
});
});
</script>
Use strtotime() and date():
$originalDate = "2010-03-21";
$newDate = date("d-m-Y", strtotime($originalDate));
(see strtotime and date docs on the PHP site).
<?php
/* Set start and end dates here */
$startDate = new DateTime("15 August 2012 12:00:00");
$endDate = new DateTime("15 November 2012 12:00:00");
/* /Set start and end dates here */
print $startDate->format('FORMAT');
?>
See all date time formats: http://www.php.net/manual/en/datetime.formats.php
I have the following code to set the minimum date of datepicker.
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
// sets "theDate" 2 days ahead of today
theDate.setDate(theDate.getDate() + 2);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
If today's date is 11/14/2012 then the value of datepicker is 11/16/2012. However, since the date should be based on server's datetime I cannot use javascript date because it will get the current date of the computer instead of server's date.
So what I did is change it to the following code:
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
// sets "theDate" 2 days ahead of today
//theDate.setDate(theDate.getDate() + 2);
theDate.setDate(<?php echo $this->session->userdata('checkin') ?>);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
Please take a look at this line:
theDate.setDate(<?php echo $this->session->userdata('checkin') ?>);
BTW, I am using codeigniter session.
This works great but the problem is the minimum date in datepicker is not set to 11/16/2012 instead it was set to 11/2/2012.
Anyone know how to insert the PHP value correctly into jQuery?
I have already found the answer. Here it is:
$( "#sd" ).datepicker({
// before datepicker opens run this function
beforeShow: function(){
// this gets today's date
var theDate = new Date();
theDate.setDate(<?php echo date('d', strtotime($this->session->userdata('checkin'))) ?>);
// set min date as 2 days from today
$(this).datepicker('option','minDate',theDate);
},
// When datepicker for start date closes run this function
onClose: function(){
// this gets the selected start date
var theDate = new Date($(this).datepicker('getDate'));
// this sets "theDate" 1 day forward of start date
theDate.setDate(theDate.getDate() + 1);
// set min date for the end date as one day after start date
$('#ed').datepicker('option','minDate',theDate);
}
});
It should extract the day only and not the whole date.
theDate.setDate(<?php echo date('d', strtotime($this->session->userdata('checkin'))) ?>);
Instead of
theDate.setDate(<?php echo $this->session->userdata('checkin') ?>);
I currently have this method:
function fill_date_jaarlijks()
{
var today = new Date();
$("#datepicker_eind").datepicker("setDate", new Date(today.getFullYear()+1,today.getMonth(),today.getDay()));
}
What it should do is, return the date of (today + 1 year).
What it actually returns is 01 December 2012, while today's date is 19 December 2011.
Could someone explain?
getDay returns day of week
Use getDate instead.
Or better still:
var dateValue = new Date();
dateValue.setFullYear(dateValue.getFullYear() + 1);
$("#datepicker_eind").datepicker("setDate", dateValue);
Once the user has selected the date from the datepicker, i want to add 41 days.
<script language="javascript">
$(document).ready(function() {
$("#startdate").datepicker({ dateFormat: 'd/m/y'});
$('#startdate').datepicker({
onSelect: function(dateStr) {
var nights = parseInt($('#numofdays').val());
var depart = $.datepicker.parseDate('d/m/y', dateStr);
depart.setDate(depart.getDate('d/m/y') + nights);
$('#calc').val(depart);
}
});
});
</script>
Start: <input type="text" id="startdate" class="datepicker"><br />
<input type="hidden" id="numofdays" value="41"><br />
Calc: <input type="text" id="calc">
You might just need to combine the options in the same initiating function:
$("#startdate").datepicker({
dateFormat: 'd/m/y',
onSelect: function(dateStr, inst) {
var nights = parseInt($('#numofdays').val());
var depart = $.datepicker.parseDate('d/m/y', dateStr);
depart.setDate(depart.getDate('d/m/y') + nights);
$('#calc').val(depart.toLocaleDateString());
}
});
See this in action: http://jsfiddle.net/william/L9Szd/.
$('#startdate').datepicker('getDate') will return a Date object
d = $('#startdate').datepicker('getDate');
d.setDate(d.getDate()+nights); // add int nights to int date
alert(d);
Adding d.getDate() and nights will jump time forward. So if 9/16/2011 + 41 days you'll get 10/25/2011
would seem strange as a user to select a date, and then the box says a date that's 41 days later instead of the one I picked. why not do this addition server side with PHP?
$date_string = date('Y-m-d', strtotime('+41 days', strtotime($_POST['date_input'])));
This is the only simple way I found to do this:
To set date to 41 days ahead of the selected date:
1.Fetch selected date from a datepicker field
var newdate = new Date($("#datepicker_date_field_1").datepicker("getDate"));
2.Increase the date got from above
newdate.setDate(newdate.getDate() + 41);
3.Assign the newly formed date to another (or same) datepicker field
$("#datepicker_date_field_2").datepicker("setDate",newdate);