JQuery Datepicker and implementing selected dates to disable dynamically

souldj
souldj used Ask the Experts™
on
I have a classic ASP page that pulls dates from the database. These dates are dates that my jquery calendar must disable.

I need a page that takes information from the database and puts it into an array which is then put into the javascript.

In order to disable specific dates, we need to create a custom function. Our function will compare all the dates with an array of disabled dates.

So if a date is in disabled dates array our function will simply return false.  Here is the code snippet. The code is heavily commented and will help you in understanding.


Here is the Javascript for Jquery Datepicker

 <script>
 
 /** Days to be disabled as an array */
var disableddates = ["12-3-2019", "12-11-2019", "12-25-2019", "12-20-2019"];
 
function DisableSpecificDates(date) {
 
 var m = date.getMonth();
 var d = date.getDate();
 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 + 1) + '-' + d + '-' + y ;
 
  // 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 ($.inArray(currentdate, disableddates) != -1 ) {
 return [false];
 }
 }
 
}
 
 
 $(function() {
 $( "#datepicker" ).datepicker({
 beforeShowDay: DisableSpecificDates
 });
 });
 </script>

Open in new window

The inArray() method returns -1 if  it cannot find a match.


SQL Database of Dates
tbl_calendardates

/****** Object:  Table [dbo].[tbl_calendardates]    Script Date: 5/15/2019 11:30:35 PM ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[tbl_calendardates](
	[autoid] [int] IDENTITY(1,1) NOT NULL,
	[daterequired] [datetime] NULL
) ON [PRIMARY]
GO

Open in new window



Thank you in advance
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
	<script type="text/javascript">
		 /** Days to be disabled as an array */
		var disableddates = [<%
			Dim objConn
			Set objConn = Server.CreateObject("ADODB.Connection")
			objConn.ConnectionString = "Provider=SQLOLEDB; Data Source=(local); Database=[DATABASE]; User ID=[USER ID]; Password=[PASSWORD]"
			objConn.Open	
			Dim SQL
			SQL = "select * from tbl_calendardates"

			Set rs = objConn.Execute(SQL)
			If conn.Errors.Count == 0 Then
				While Not rs.EOF
					For Each objField in rs.Fields
						Response.Write "'" & rs(objField.daterequired) & "',"
					Next
					rs.MoveNext
				Wend
				rs.Close
			End If

		%>];

		function DisableSpecificDates(date) {
			  // 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 ($.inArray(currentdate, disableddates) != -1 ) {
				 	return [false];
				 }
			 }
		}

		$(function() {
			$( "#datepicker" ).datepicker({
				beforeShowDay: DisableSpecificDates
			 });
		});
	</script>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial