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/
Related
Hi i have Jquery datepicker with allowed to choose coming 6 days , but need to make it depended on select option for example :
if choose some select option, i want to datepicker let me choose 10 days instead of allowed 6days and e.t.c
did anyone know how to do this ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> -->
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
var date=Number($("#date").val());
$("#date").change(function(){
var date=Number($("#date").val());
$("#datepicker").datepicker("destroy");
if(date===0)
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 6d"} ).val();
else
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 15d"} ).val();
$("#datepicker" ).datepicker("refresh");
console.log(date);
});
$(function() {
$("#datepicker").datepicker().val();
});
});
</script>
</head>
<body>
<select name="da" id="date">
<option value="0">no</option>
<option value="1">yes</option>
</select>
<button id="button">button</button>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
In your maxdate function is 6d defined. Maybe change it to 10d?
$("#datepicker").datepicker({ dateFormat: "yy-mm-dd", minDate: -0, maxDate: "0m +0w 10d"} ).val();
Will work. Also instead of making a .change, you can call a javascript function by adding an onClick to the radiobuttons and setting it in the function. Reload the datepicker afterwards because else it's still using the old configuration.
For example
<option onClick('changeto5();') value="0">no</option>
<option onClick('changeto10();') value="1">yes</option>
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>
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>
I have to display date in input box after picking from datepicker using jQuery.
I have used following code:
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM' });
$.datepicker.formatDate('yy-mm-dd');
});
And I am able to get date in this format: "Fri 09 August".
However my requirement is: Fri 09 August (Today)
Here's a JS Fiddle to work upon: http://jsfiddle.net/4cgPe/
Any idea how I could achieve this?
I couldn't find much about adding custom text to jQuery, so I came up with my own JavaScript.
I built upon your DatePicker code.
(What I understood was, if the selected date is of today, then add " (Today)", OR, add " (Tomorrow)" if selected date is of tomorrow OR, add nothing for other dates.
<html><head><link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" ></script>
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({
minDate: -0,
maxDate: "+1M +2D",
showOn: "button",
buttonImage: "calendar.png",
buttonImageOnly: true,
dateFormat: 'D dd MM yy' });
$.datepicker.formatDate('yy-mm-dd');
});
function updateDate(){
var inputDate=document.getElementById('datepicker').value;
var selectedDate=new Date(inputDate);
var today=new Date();
var tomorrow=new Date();
tomorrow.setDate(today.getDate()+1);
selectedDate.setHours(0,0,0,0);
today.setHours(0,0,0,0);
tomorrow.setHours(0,0,0,0);
var DaysFull=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];
var DaysShort=["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sun"];
var MonthsFull=["January","February","March","April","May","June","July","August","September","October","November","December","January"];
var MonthsShort=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","Jan"];
var finalDate=DaysShort[selectedDate.getDay()]+" "+selectedDate.getDate()+" "+MonthsFull[selectedDate.getMonth()];
if(selectedDate.getTime() == today.getTime()){
document.getElementById('datepicker').value=finalDate+" (Today)";
}
else if(selectedDate.getTime() == tomorrow.getTime()){document.getElementById('datepicker').value=finalDate+" (Tomorrow)";}
else {document.getElementById('datepicker').value=finalDate;}
}
</script>
</head>
<body>
<form><input type="text" id="datepicker" onchange="javascript:updateDate()" /></form>
</body></html>
EDIT:
Additional Functionality: There may be a requirement to use Full Days/Months name or Short Days/Months, so you can use the array accordingly.
DaysFull: Sunday, Monday, etc.
DaysHalf: Sun, Mon, etc.
MonthsFull: January, February, etc.
MonthsHalf: Jan, Feb, etc.
Hope this helps. Let me know if this is not enough. :)
Full Source Code as below for different types of format :
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30" /></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
</body>
</html>
More about format refer This link
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