How to make two jquery function can work together?

How to make two jquery function can work together? - javascript

I have develop a form and have two function one is to choose the date using datepicker another function is use to redirect the page to the here using ajax function.Now the problem is only the ajax function can working at here if i include the jquery 2.1.1 ,if i remove the 2.1.1 then only the datepicker can function.Does anyone have any idea about how to solve this jquery problem ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.reveal').on('click', function(e){
e.preventDefault();
var link = $(this).attr('href');
$('.page').load(link);
});
});
</script>
</head>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
<header>
</header>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li class="dropdown">
Sales Report
<div class="dropdown-content">
<a class="reveal" href="table.html">Monthly Sales by Customer Category</a>
<a class="reveal" href="Login1.html">Monthly Sales by Customer Category</a>
Link 3
</div>
</li>
</ul>
<label for="startDate">Date :</label>
<input type="text" class="date-picker" />
<div class ="page">
</div>
</body>
</html>

Related

how to disable all future dates in input type=DatePicker using scripting [duplicate]

This question already has answers here:
jQuery DatePicker with today as maxDate
(5 answers)
Closed 3 years ago.
I'm developing application in iWorkflow platform. It is an object oriented platform. I have DatePicker control for Field named Select Date :.
I want to disable the future dates using javascript for type=DatePicker. But my codes isn't working.
I tried this by adding maxDate:0. But I think $("#ctrl_DatePicker_e0leq").DatePicker works for Input type=Text not DatePicker.
$("#ctrl_DatePicker_e0leq").DatePicker({
maxDate: 0
});
I'm expecting correct script to disable dates greater than the current date.

You can use this approach:
$(document).ready(function () {
var today = new Date();
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
autoclose:true,
endDate: "today",
maxDate: today
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
$('.datepicker').keyup(function () {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9^-]/g, '');
}
});
});
And:
<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>
<p>Select Date: <input type="text" class="datepicker"></p>
For more Details you can use this link:

$(document).ready(function() {
$("#datepicker").datepicker({
minDate: 0
});
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
minDate: 0
});
});
</script>
</head>
<body>
Date :
<div id="datepicker"></div>
</body>
</html>

jQuery show date based on month

I have Month and Year picker for that I used this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
$(function() {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
It's working fine. My requirement is if I select Aug 2017 I need to show all date in different different div. SO based on Month & Year selection date should show
For ex:
Aug 2017
div 1 div 1 div 3 div 3
1 2 3 4
Sunday Monday Tuesday wednesday
like this i want to show all date for particular month

I think this simple code will help you. Use this and enjoy.
Thanks..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<style type="text/css">
.datediv{
border:1px solid;
padding: 10px;
}
</style>
<script type="text/javascript">
var weekday = new Array(7);
weekday[0] = "Sunday";
weekday[1] = "Monday";
weekday[2] = "Tuesday";
weekday[3] = "Wednesday";
weekday[4] = "Thursday";
weekday[5] = "Friday";
weekday[6] = "Saturday";
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth)+1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
html='';
for(i=1;i<=$d;i++){
console.log(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
d = new Date(inst.selectedYear+'-'+(parseInt(inst.selectedMonth)+1)+'-'+i);
console.log(d);
n = weekday[d.getDay()];
html += '<div class="datediv'+i+'">div-'+i+'<br><span id="div-'+i+'">'+n+'</span></div><br>';
}
$('#datecontent').html(html);
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent">
</div>
</body>
</html>

Seems like you're making a calendar. This code should work:
var weekday = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
minDate: 0,
onClose: function(dateText, inst) {
$d = new Date(inst.selectedYear, parseInt(inst.selectedMonth) + 1, 0).getDate();
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
html = '';
for (i = 1; i <= $d; i++) {
d = new Date(inst.selectedYear + '-' + (parseInt(inst.selectedMonth) + 1) + '-' + i);
n = weekday[d.getDay()];
html += '<div class="datediv">' + i + '<br>' + n + '</div><br>';
}
$('#datecontent').html(html);
}
});
.datediv {
border: 1px solid;
padding: 10px;
}
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
<div id="datecontent">
</div>

jquery datepicker get date range

I am using jQuery datepicker to select date ranges. The code below gets the start input1 and the end input2 dates of the date range. But how do I simply get the dates in between? Thank you for your suggestions!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link type="text/css" href="../demoengine/demoengine.css" rel="stylesheet">
<script type="text/javascript" src="../demoengine/demoengine.js" async defer></script>
<title>jQuery UI Datepicker: Using Datepicker to Select Date Range</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<style type="text/css">
.dp-highlight .ui-state-default {
background: #484;
color: #FFF;
}
</style>
</head>
<body>
<div id="datepicker"></div>
<p>
Dates:
<input type="text" id="input1" size="10">
<input type="text" id="input2" size="10">
</p>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (!date1 || date2) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker("option", "minDate", dateText);
} else {
$("#input2").val(dateText);
$(this).datepicker("option", "minDate", null);
}
}
});
});
</script>
</body>
</html>

In order to get the dates between date1 and date2 you can just add one day in a for-loop until you reach the end date. The date object provides a setDate method, which allows to go beyond the end of month (like August 32nd and just wraps it to September 1st for you).
for(; date1 < date2; date1.setDate(date1.getDate() + 1)) {
alert(date1);
}

jQuery Datepicker resets date when using different date format

I have found a possible bug: datepicker resets initial date when using different date format like "mm yy" or "yy". So, if a select a date, the second time a do this the date is not saved and today's date is preselected.
Sample code:
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: "mm yy" });
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
See fiddle example.
It only happens if your format does not contain a "dd" or similar for day values.
Any idea of how to avoid it?

You should keep all the necessary element of date in your date picker's format.
format: 'dd-mm-yy',

I just got this from this answer to another question; it will solve your problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
Reference from:
http://jsfiddle.net/bopperben/DBpJe/

jQuery UI DatePicker to show month year only in one calendar

I have found this code in this page..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
And works if you have only one calendar at the same page, but if I have two calendars, hides the days in both, and i want that only be applied in one calendar.. Someone can tell me how can i do it?
Thanks.

By using $('.date-picker').datepicker({ you init all your calendars with the same settings, specifically date format, so you need to init them separately. E.g. if your calendars have ids "firstCalendar" and "secondCalendar", init first one as above:
$('#firstCalendar').datepicker( {
dateFormat: 'MM yy'
});
And the second one with default dateFormat:
$('#secondCalendar').datepicker( {
dateFormat: 'mm/dd/yy'
});

You need to remove
.ui-datepicker-calendar {
display: none;
}
Try this one jsfiddle

Develop Reference

JavaScript is the programming language of the Web.

How to make two jquery function can work together? - javascript

Related

how to disable all future dates in input type=DatePicker using scripting [duplicate]

jQuery show date based on month

jquery datepicker get date range

jQuery Datepicker resets date when using different date format

jQuery UI DatePicker to show month year only in one calendar

Categories

Resources