im a javascript / jQuery n00b so bear with me
I have a table in the database that contains multiple rows with startdate & enddate columns
I have on the page a datepicker jquery element
What I need it to do is on the page load check the database table and all the dates from startdate to enddate to be disabled
I have the below which would do individual dates however I dont know how to get it to loop and disable multiple entries ( ranges - from date to date )
For example 24-4-2017 to 26-4-2017 disabled also 30-4-2017 to 17-5-2017 disabled
so multiple ranges need to be disabled
Code I have so far below, please help guys Ive been racking my brains over this for 2 days now and have severe code block
var disabledDays = ["22-04-2017"]; // M-DD-YYYY Format
/* utility functions */
function nationalDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
//console.log('Checking (raw): ' + m + '-' + d + '-' + y);
for (i = 0; i < disabledDays.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
//console.log('bad: ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
return [false];
}
}
//console.log('good: ' + (m+1) + '-' + d + '-' + y);
return [true];
}
/*
Above 2 are probably redundant because BaT are open Bank Holidays
and also open weekends so ..
*/
/*
Create DatePicker
Change MaxDate below to show more months
*/
jQuery(document).ready(function() {
jQuery('#date').datepicker({
minDate: new Date(2017, 0, 1),
maxDate: new Date(2017, 6, 31),
dateFormat: 'DD, MM, d, yy',
constrainInput: true,
beforeShowDay: nationaldays
});
});
Just compare the day that is currently rendering with disabled dates range.
$(document).ready(function() {
var startDisabledDates = new Date(2017, 03, 10),
endDisabledDates = new Date(2017, 03, 20);
$("#date").datepicker({
beforeShowDay: function(day) {
var isSelectable = day < startDisabledDates || day > endDisabledDates;
return [isSelectable];
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="date">
Related
I have one problem, which I can not resolve and have no idea where is mistake
One I create a tabel called posts and in codeigniter create a form Posts, after createing all post I want to display posts in index.php and I have table called
Date of departure, and date of return. One i create post date looking good but when I display in my index.php it's look like 0000-00-00 00:00:00
In begginig data type was Date, now i change to be DateTime but nothing happend, same problem
Maybe I make mistake in my JS script
Any comment ?
My script
<script>
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker1" ).datepicker();
} );
</script>
When your field in MySQL is Date-time it aspects proper format before saving in database.
So convert string to date time format in php using.
date("Y-m-d H:i:s", strtotime($string));
Or you can do the same in Datepicker
$(function() {
$('#datepicker').datepicker({
dateFormat: 'yy-dd-mm',
onSelect: function(datetext){
var d = new Date(); // for now
var h = d.getHours();
h = (h < 10) ? ("0" + h) : h ;
var m = d.getMinutes();
m = (m < 10) ? ("0" + m) : m ;
var s = d.getSeconds();
s = (s < 10) ? ("0" + s) : s ;
datetext = datetext + " " + h + ":" + m + ":" + s;
$('#datepicker').val(datetext);
},
});
});
Fiddle for datepicker
Note if you want date only in MySQL field the omit hour min sec part of conversion
I've created a datepicker for one of my client.
They are in a flower delivery business and they offer same day delivery for order which is placed before 12 noon. so I created a following code for that. The basic overview of its functionality is:
-> Disable current date if the time is greater than 12:00 (noon) so that customer can not put order for same day delivery.
But somehow recently one order can at 6PM for same day delivery. Which is an issue.
This is what I did so far:
<?php
// This is how i check for current date and time and if the delivery cut off time is passed add that date to disabled dates array. so customer can not put order of the current date.
current_day = date( "w" );
$todays_cut_off_time = get_option("weekday_cut_off_time_$current_day");
$todays_cut_off_time = strtotime($todays_cut_off_time);
$current_time = date( 'H:i', current_time( 'timestamp', 0 ) );
$current_time = strtotime($current_time);
if($todays_cut_off_time < $current_time)
{
$disabled_dates_array[] = date("m/d/Y");
}
?>
<script>
jQuery( document ).ready(function() {
var disableddates = <?php echo $disabled_delivery_dates; ?>; //contains list of disabled dates by admin.
exceptions = <?php echo $holiday_exception_dates; ?>; //contains dates those are exceptional
function DisableSpecificDates(date) {
var m = date.getMonth() + 1;
if(m <= 9)
m = '0'+m;
var d = date.getDate();
if(d <= 9)
d = '0'+d;
var y = date.getFullYear();
// First convert the date in to the mm-dd-yyyy format
// Take note that we will increment the month count by 1
var currentdate = m + '/' + d + '/' + y ;
// We will now check if the date belongs to exceptions array
for (var i = 0; i < exceptions.length; i++) {
// Now check if the current date is in disabled dates array.
if (jQuery.inArray(currentdate, exceptions) != -1 ) {
return [true];
}
}
// We will now check if the date belongs to disableddates array
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if (jQuery.inArray(currentdate, disableddates) != -1 ) {
return [false];
}
}
// In case the date is not present in disabled array, we will now check if it is a weekend.
// We will use the noWeekends function
//var weekenddate = jQuery.datepicker.noWeekends(date);
var day = date.getDay();
return [(<?php echo $disabled_week_day; ?>), ''];
}
function FindMinDate(date){
return 0;
}
jQuery( "#delivery_date" ).datepicker({
dateFormat: 'mm-dd-yy',
minDate: 0,
beforeShowDay: DisableSpecificDates
});
});
</script>
Can somebody please guide me in the right direction to get this done. Thanks in advance.
Hiii..
My concept is an agent wants add date from backend which is from(6/07/2015) to until(20/07/2015) these dates will store in database. if agent want disable 2 days(ex. 12/07/15 and 14/07/2015) then how to show these dates disable in datepicker on fron end. Because these two day agent haven't product. That's why agent wants these two day disable and remaining day 6 to 20 should be enable.
Please any body have any idea please help me.
Thanks!!!
please refer this link. this is working example with jquery datepicker.
Please see below code.
var unavailableDates = ["9-3-2012", "14-3-2012", "15-3-2012"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$("#iDate").datepicker({
defaultDate: new Date("3-1-2012"),
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});
Bootstrap datepicker:
In the bootstrap datepicker you can use the method:
datesDisabled
String, Array. Default: []
Array of date strings or a single date string formatted in the given date format
for example:
$('#sandbox-container input').datepicker({
datesDisabled: ['07/06/2015', '07/21/2015']
});
JQUERY datepicker UI
In this use the beforeShowDay method
var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, unavailableDates) < 0) {
return [true,"","Book Now"];
} else {
return [false,"","Booked Out"];
}
}
$('#iDate').datepicker({ beforeShowDay: unavailable });
refernce for JQUERY datepicker UI
I'm using the FullCalendar v1.6.1 version .
I want to change the event background color in accordance with some conditions,and the rest of events in another color . but I don't know how make to diferent events.
in my table , table name is booking :
id --- + --- the_date
1 2014-02-25
2 2014-02-26
3 2014-02-27
4 2014-03-22
5 2014-04-15
6 2014-04-17
I want to change the event background color of the above dates in red , and rest of the them in green .
Any idea how can i colorize differently each event?
Thanks in advance
You can set the backgroundColor property for your specific events :
$('#calendar').fullCalendar({
{
title: '1',
start: new Date(2014, 02, 25, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#ED1317'
},
{
title: '2',
start: new Date(2014, 02, 26, 10, 30),
allDay: false,
editable: false,
backgroundColor: '#ED1317'
},
...
});
For the rest of the dates, just use the .fc-future and .fc-today CSS properties :
.fc-future,
.fc-today {
background-color: #10CC55;
}
if you want to change background color of events you can use
eventRender: function (event, element, view)
{
var date = new Date(); //this is your todays date
if (event.start >= date)
$(element).css("backgroundColor", "red");
}
and if you want to change background color of day then you can user dayRender CallBack of Fullcalender
dayRender: function (date, element, view)
{
var date = new Date(date);
var day = date.getDate().toString();
if (day.length == 1)
day = 0 + day;
var year = date.getFullYear();
var month = (date.getMonth() + 1).toString();
if (month.length == 1)
month = 0 + month;
var dateStr = year + "-" + month + "-" + day ;
// YourDates is Json array of your default dates
for (var i = 0; i < YourDates.length; i++)
{
//here you campare calender dates to your default dates
if ( dateStr.toString() == YourDates[i].toString() )
{
$(element).css("background", "red"); // it will set backgroud of that date
}
}
}
for More Info :dayRender:FullCalender
The calendar triggers the event 'eventAfterRender' after each event draw. The same provides access to event and element as well. You can implement your requirement, by comparing the event.start or event.end date to current date, and change the color of the element as required.
For changing the background color I did in this manner
{
title: 'Long Event',
start: new Date(y, m, d - 5),
end: new Date(y, m, d - 2),
backgroundColor: App.getLayoutColorCode('green')
}
Hope this helps....
I have created a timer to be used as a reference on a alert when the timer reaches exactly 5:00 pm/ 17:00. Do you have any ideas how could I do that? Do I check the time once in a while?
Here's how I create my timer.
<script language="JavaScript">
var tick;
function stop() {
clearTimeout(tick);
}
function usnotime() {
var datetoday = document.getElementById("datenow")
var currentDate = new Date()
var day = currentDate.getDate()
var month = currentDate.getMonth() + 1
var year = currentDate.getFullYear()
datetoday.val("" + month + "/" + day + "/" + year + "");
var txt = document.getElementById("timeticker")
var ut = new Date();
var h, m, s;
var time = " ";
h = ut.getHours();
m = ut.getMinutes();
s = ut.getSeconds();
if (s <= 9) s = "0" + s;
if (m <= 9) m = "0" + m;
if (h <= 9) h = "0" + h;
time += h + ":" + m + ":" + s;
txt.innerHTML = time;
tick = setTimeout("usnotime()", 1000);
}
//--> document.rclock.rtime.value=time; tick=setTimeout("usnotime()",1000); } //-->
</script>
<tr>
<td class="tdlabel">Current Time:</td>
<td>
<div id="timeticker" name="rtime" size="22"></div>
</td>
</tr>
And it seems that my timer is not displaying. Any ideas??
You have a mistake, you mixed javascript and jquery.
datetoday.val("" + month + "/" + day + "/" + year + "");
Should be (assuming datetoday is a textfield. If div use innerHTML instead of value)
datetoday.value="" + month + "/" + day + "/" + year + "";
and add just before the closing script tag
window.onload=function(){
usnotime();
}
Not sure if this is the exact answer; it might help posting a bit more code.
I don't see how you're starting the method. You might need to add a button-execute / page-load call of usnotime().
Do you have real objects for all of those variables? (I.e. timeticker, datenow).
Check your JavaScript error log in the browser. It's a bit hard without more code for me to see what's wrong, so either include more, or use the debugger.
Using the setTimeout() u can do , Refer this it may be useful for you
This may help you....
<html>
<head>
<title>(Type a title for your page here)</title>
<script type="text/javascript">
function display_c(){
var refresh=1000; // Refresh rate in milli seconds
mytime=setTimeout('display_ct()',refresh)
}
function display_ct() {
var strcount
var x
var x1
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
var seconds= currentTime.getSeconds()
x=month + "/" + day + "/" + year
if (minutes < 10){
minutes = "0" + minutes
}
x=x+" "+hours + ":" + minutes +":"+seconds+ " "
x1=hours + ":" + minutes + ":"+seconds+" "
if(hours > 11){
x=x+"PM"
x1=x1+"PM"
if(x1=="5:30:0 PM"){alert(x1);}
} else {
x=x+"AM"
x1=x1+"AM"
if(x1=="8:16:0 AM"){alert(x1);}
}
document.getElementById('ct').innerHTML = x;
tt=display_c();
}
</script>
</head>
<body onload=display_ct();>
<span id='ct' ></span>
</body>
</html>