I want to change to year picker calendar only in a dynamic input fields.The calender should show only year values Can any one help me please.
Here is the javascript code.
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker();
}
});
You can try this one. And see if it will help your problem.
HTML:
<select name="yearpicker" id="yearpicker"></select>
JS:
var startYear = 1800;
for (i = new Date().getFullYear(); i > startYear; i--)
{
$('#yearpicker').append($('<option />').val(i).html(i));
}
Here is a jsfiddle link
$('body').on('focus',".datepicker", function(){
if( $(this).hasClass('hasDatepicker') === false ) {
$(this).datepicker({
minViewMode: 2,
format: 'yyyy'
});
}
});
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
<input type="text" class="datepicker" />
I assume it is bootstrap datepicker (Link)
I would not use a datepicker if you want to select a year only. Use a select for that. However, you can modifiy the datepicker (since you didn't mention which one you are using I assume jQuery UI) to only return the year.
Have a look at this fiddle:
$(function() {
$(".datepicker").datepicker({ dateFormat: 'yy' });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<input type="text" class="datepicker"/>
Related
Does anybody know why this Script not working? I am trying to disable weekends and previous dates? I have tried searching all over the web but I am struggling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="date" id="date" class="form-control">
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
minDate : 'now'
});
});
</script>
DatePicker
According to documentation, you simply need to disable the days of the week by utilizing numbers 0-6. Sunday starting at 0 and Saturday ending at 6, and obviously, every other day of the week assigned accordingly. Also, the format of daysOfWeekDisabled is a comma delimited string which you will see below. In order to only show today's date and on, simply set a minDate of today's date. All of the above is implemented in code below:
let dateToday = new Date();
$('#date').datepicker({
daysOfWeekDisabled: '0, 6',
minDate: dateToday
})
In your case, the problem is you have input type as date but if you change that to test it will work.
Working Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<head>
<script type="text/javascript">
$(function () {
$("#date").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate : 'now'
});
});
</script>
</head>
<body>
<input type="text" id="date" />
</body>
</html>
I use datepicker Jquery to select date and below is my code:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
jQuery(function() {
jQuery( "#datepicker" ).datepicker({dateFormat: "yy-mm-dd"});
jQuery("#datepicker").blur(function(e) {
jQuery(this).datepicker("hide");
});
});
</script>
It works when I use .blur function. But, I am not able to change the month. When I change the month, it hides. How can I resolve this problem ?
I encounter this problem. What I want to do is, I want to retrieve the value of the datepicker and store it in the variable, then I wanted the value to popup. However, when I click Go button , I got the undefined as the value.Here's my code :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true});
});
</script>
<style>
div.ui-datepicker{font-size:10px;}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<input value=" Go " onClick="Go_OnClick()" type="button">
<script>
function Go_OnClick(){
dateVariable = $("datepicker").val();
alert(dateVariable);
}
</script>
</body>
</html>
You missed # for IDselector, and that might not be good practice to retrieve date with using .val() you'll get string value, to retrieve date:
You need to use getDate()
function Go_OnClick(){
dateVariable = $("#datepicker").datepicker('getDate'); //getDate and # for ID selectror
alert(dateVariable);
}
you are missing # when we are trying to get the val of datepicker.
So use $("#datepicker").val(); in Go_OnClick() methos and it will work
You have a typo.
Change dateVariable = $("datepicker").val(); to dateVariable = $("#datepicker").val();
You were missing one # before datepicker
I want to have a JqueryUI date picker with both its input text area and the calendar opened.
I know the two following options:
Use an input element and then the calendar is opened after the input field is clicked.
Use a div element and then there is no input field at all.
How can I get option 1, but with the calendar opened by default?
jsfiddle
$(function() {
$("#inputDatepicker").datepicker();
$("#divDatepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<p>Date with input:
<input type="text" id="inputDatepicker">
</p>
<p>Date with div:
<div id="divDatepicker">
</p>
I can't show you with a fiddle (somehow, this feature does not work) but try to set the focus to the input-field.
Like this
$(document).ready(function() {
$(function() {
$("#inputDatepicker").datepicker();
$("#inputDatepicker").focus();
});
});
Cheers
R
You can use the altField to do it
$(function() {
$("#divDatepicker").datepicker({
altField: '#inputDatepicker'
});
});
<link href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<input type="text" id="inputDatepicker">
<div id="divDatepicker"></div>
Using altField and onchange event:
http://jsfiddle.net/sexaw2po/
function inputDatepickerChanged(val) {
$("#divDatepicker").datepicker("setDate", new Date(val));
}
I' m using jquery ui datepicker.
I have two datepicker on the page, from and to datepickers
when i select a date in one datepicker i update the max and min date to the second datepicker.
my problem is that just before it close(hide) the seleted datepicker,
it show the second datepicker instead of the first one (just when i update the min date of the second datepicker) and then close it.
why does it show the second datepicker when i update the min date from the other datepicker?
how can i hide the datepicker before i update the second datepicker?
<!doctype html>
<html >
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input name="fromDateCalendar" type="text" value="10/12/2013" id="fromDateCalendar" style="width:100px;" />
<input name="toDateCalendar" type="text" value="09/01/2014" id="toDateCalendar" style="width:100px;" />
<script>
$(function () {
$('#fromDateCalendar').datepicker({
onSelect: function (date) {change1(date);}});
$("#toDateCalendar").datepicker({
onSelect: function (date) {change2(date);}, maxDate: '0' });
});
function change1(date) {
$('#toDateCalendar').datepicker('option', 'minDate', date);}
function change2(date) {
$('#fromDateCalendar').datepicker('option', 'maxDate', date);}
</script>
</body>
</html>
to solve the problem of showing the #2 datepicker for a moment(in the place of the #1 datepicker) when i change the max date,
i call the ....datepicker('option', 'minDate', start) after the #1 datepicker close with setTimeout
onSelect: function (date) {
setTimeout(function () {
....datepicker('option', 'minDate', start)
}, 300)
}....