- servlet
- JavaScript
- jQuery
- JSP
Months validation on date picker based on drop down
Hi Team,
I build a page where one drop down is there in drop down all weeks days are coming while selecting the date all days only enable in date picker . suppose we select Monday from drop down then in date picker only all Mondays are enable to select other days are disable .
now my requirement is that in place of days we select month from drop down then only that particular month is enable on date picker other months are disable to select .
I build a page where one drop down is there in drop down all weeks days are coming while selecting the date all days only enable in date picker . suppose we select Monday from drop down then in date picker only all Mondays are enable to select other days are disable .
now my requirement is that in place of days we select month from drop down then only that particular month is enable on date picker other months are disable to select .
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function ()
{
//datepicker
$("#txtstart_date").datepicker
({
minDate:"dateToday",
dateFormat: 'dd-mm-yy',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$("#txtend_date").datepicker("option", "minDate", selectedDate);
},
//Code to disable dates according to selection
beforeShowDay: filterDate
});
});
//By default no day selected in dropdown. So all the days will be displayed.
var str=0;
//Filterdate function to make the days enable/disable based on the selection.
var filterDate = function(date) {
if(str=='0'){
return [true];
}else{
return [date.getDay() == str];
}
};
//Dropdown onchange function to set latest selection of dropdown.
function test()
{
str=$( "#drop1" ).val();
}
</script>
</head>
<body>
<form action="" id="myForm" method="post">
<input type="text" name="txtstart_date" class="input-text datepickerwidth required" id="txtstart_date" placeholder="Start Date*"/>
<select onchange="test()" id="drop1">
<option value="0">Select Month</option>
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
</select>
<input id="btnSubmit" type="submit" value="submit" />
</form>
</body>
</html>
Hi lekim thanx for your reply i have done setup with fiddle please find the link below -
Link of my fiddle
https://jsfiddle.net/erpuneetsrivastava/exbm613z/9/
but please remember what i did i just want to meet my requirement but till now i did't ,validation i want that based on drop down value suppose i select 1 from drop down it means January so only January should be enable on date picker , other months should be disable . hope you understand the requirement please help me out on this to me .
Link of my fiddle
https://jsfiddle.net/erpuneetsrivastava/exbm613z/9/
but please remember what i did i just want to meet my requirement but till now i did't ,validation i want that based on drop down value suppose i select 1 from drop down it means January so only January should be enable on date picker , other months should be disable . hope you understand the requirement please help me out on this to me .
replace :
return [date.getDay() == str];
by :
return [(1+date.getMonth()) == str];
test page : https://jsfiddle.net/stw9fa1x/1/
return [date.getDay() == str];
by :
return [(1+date.getMonth()) == str];
test page : https://jsfiddle.net/stw9fa1x/1/
Hi leakim,
Thank you for you help i have done the scripting in my code before i am sending ajax call as you suggested but it's not working please help me out on this .
below is my code where Id having name mYear is the month drop down and date picker id are pdate,ppdate and bdate where we need to put that
logic . please check below code and let me know if you need more clearance.
Thank you for you help i have done the scripting in my code before i am sending ajax call as you suggested but it's not working please help me out on this .
below is my code where Id having name mYear is the month drop down and date picker id are pdate,ppdate and bdate where we need to put that
logic . please check below code and let me know if you need more clearance.
var monthYear=0;
monthYear = $('#mYear').val();;
alert(mYear);
$("#pdate").datepicker
({
minDate:"dateToday",
dateFormat: 'dd/mm/yy',
changeMonth: true,
numberOfMonths: 1,
onClose: function (selectedDate) {
$("#pdate").datepicker("option", "minDate", selectedDate);
},
//Code to disable dates according to selection
beforeShowDay: filterDate
});
var filterDate = function(date) {
if(monthYear=='0'){
return [true];
}else{
return [(1+date.getMonth()) == monthYear];
}
}
$(document).ready(function() {
$("#sdata").click(function(evt) {
evt.preventDefault();
if(save()){
$.ajax({
url: "Test.jsp",
type: "post",
data: {
pS:$('#pS').val(),
pType:$('#pT').val(),
pCode:$('#pC').val(),
mYear:$('#mYear').val(),
pDate:$('#pdate').val(),
ppDate:$('#ppdate').val(),
bDate:$('#bdate').val()},
success: function(responseFromServer) {
$.each(responseFromServer, function(resultMessageKey,resultMessageValue) {
$('#content').html(resultMessageKey);
});
getClearDateValues();
},
error: function() {
alert(" Ajax call Failed to Update Values into Database");
}
});
}
else
{
}
});
});
you did not talk about ajax thing in your orginal post
your question is now confusing
could you validate your inital question is answered and create a new one ?
at first look you did not put the code inside the << $(document).ready(function
your question is now confusing
could you validate your inital question is answered and create a new one ?
at first look you did not put the code inside the << $(document).ready(function
Hi Leakim,
Thanx for your support i have create a new thread please tell me where i am doing wrong in that thread. new thread link is below -
https://www.experts-exchange.com/questions/29173149/Months-validation-on-date-picker-based-on-drop-down-not-working.html#questionAdd
Thanx for your support i have create a new thread please tell me where i am doing wrong in that thread. new thread link is below -
https://www.experts-exchange.com/questions/29173149/Months-validation-on-date-picker-based-on-drop-down-not-working.html#questionAdd
Premium Content
You need an Expert Office subscription to comment.Start Free Trial