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>
Related
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->
$(function() {
$( "#datepicker" ).datepicker({
changeYear: true,
minDate: '-3M',
maxDate: '+28D',
});
});
I want to give admin power so that they can dynamically set the maximum date from the drop down. For e.g - if admin selects 3 from drop down it should automatically reflect in maxDate.
Here is your solution
I added new dropdown where admin select value it will automatically add in MaxDate
var newdate=$("#selected").val();
function getdate() {
console.log(newdate)
$("#datepicker").datepicker("destroy");
$( "#datepicker" ).datepicker({
changeYear: true,
minDate: '-3M',
maxDate: '+'+newdate+'D',
});
}
$( "#datepicker" ).datepicker("refresh");
getdate()
function change(){
newdate=$("#selected").val();
getdate()
}
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
<select id="selected" onchange="change()">
<option>3</option>
<option>4</option>
</select>
</div><!-- End demo -->
jQuery DatePicker for format dd mm y breaking
I type in 01 01 27 it breaks it doesn't shows the date selected in calendar
Is it a jQuery bug ?
It accepts all values above year 1927
HTML
<p>Date: <input type="text" id="datepicker"></p>
JS
$( "#datepicker" ).datepicker({
dateFormat: "dd mm y",
changeMonth: true,
changeYear: true,
minDate: "-100Y",
maxDate: "-18Y"
});
$(function () {
$( "#datepicker" ).datepicker({
dateFormat: "dd mm y",
changeMonth: true,
changeYear: true,
minDate: "-100Y",
maxDate: "-18Y"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
looks like yearRange is something you can use:
$(function() {
$("#datepicker").datepicker({
dateFormat: "dd mm y",
changeMonth: true,
changeYear: true,
yearRange: "c-100:c-18"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
I have figured out the answer
adding
shortYearCutoff: "1", solves my problem
For more details check here
im using jQuery datepicker in my php code specifically for the browsers like IE and Firefox. The default date format of datepicker is mm/dd/yyyy, however for chrome, since the date picker is already available, it shows dd/mm/yyyy. Whatever the display format is, i only want to send back to the server 'yyyy-mm-dd' or as in php date('Y-m-d)
How can i display the date from datepicker as dd/mm/yyyy and send to database as yyy-mm-dd? In doing so, i don't want to affect Chrome which is already working properly. Thanks for any advice.
You can use the dateFormat option:
$( "#datepicker" ).datepicker(
"option", "dateFormat", "yy-mm-dd"
);
Set your datepicker format try this :-
$("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd' );
More details
You have to specify dateFormat other wise its dependent to browser.
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Format date</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</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>
Reference: jqueryui datepicker
Thanks to Rahautos. I did this:
<script type="text/javascript">
if (datefield.type!="date"){ jQuery(function($){
$('#datepicker').datepicker();
$("#datepicker").datepicker("option", "dateFormat", 'yy-mm-dd' );
})
}
</script>
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 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/