My date picker is working but I want to add birthday text in the input box. please help
Here is my code:
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
});
<div class="inputField half">
<div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly />
<span class="input-group-addon"><i class="material-icons">date_range</i>
</span>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
If I understand what do you need, You could simply do something like this(just change the value of input):
$(function() {
$("#datepicker").datepicker({
autoclose: true,
todayHighlight: true,
}).datepicker('update', new Date());
$('#datepicker input').val('birthday: ' + $('#datepicker input').val());
});
then wrap updating input value in some update-callback if you need etc.
https://jsfiddle.net/re9zpu2g/
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>
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
I have the following code in my view:
<input type="text" class="form-control" id="date-from" name="date-from" value="" placeholder="Van" data-class="datepicker" />
I would like to retrieve the value of this field via AJAX for filtering.
The default format for input is mm/dd/yyyy (which i can't change either...)
So I tried getting the results in the format yyyy-mm-dd as i want them.
The following are my lines in javascript, they all return the exact input (mm/dd/yyyy)
alert($('#date-from').datepicker({ format: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ format: 'yyyy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yy-mm-dd' }).val());
alert($('#date-from').datepicker({ dateFormat: 'yyyy-mm-dd' }).val());
Here is an example of a datepicker that outputs in yyyy-mm-dd Does that help?
$(function() {
$('#datepicker').datepicker({
onSelect: function(date) {
alert(date);
},
dateFormat: 'yyyy-mm-dd',
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="datepicker"></div>
Yo can use alt-format http://api.jqueryui.com/datepicker/#option-altFormat
. And then in your ajax call you can read value form hidden field that have date value in your desired format.
$(function(){
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#altdate',
altFormat: 'yy-mm-dd'
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Date Field : <input id="datepicker" type="text" /><br />
Alt Hidden Field : <input id="altdate" type="text" /><br />
<input id="thesubmit" type="button" value="Submit" />
Or you can use manually do that by splitting string on the basis of "-" and the reverse it
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
});
$("#datepicker").change(function () {
var currentDate = $("#datepicker").val();
console.log("Desired format : ",currentDate.split("-").reverse().join('-'));
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="datepicker" type="text">
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