Develop Reference

Fetch the value from input box contain month-date format by javascript or jquery

I want to fetch the value of the date and want to increase by 1 year and set the value for the next date .but if i am putting text i am getting alert if i am just choosing from datepicker i am not getting any alert.
<style>
.datepicker-days{display:none!important;}
.datepicker-months{display:block!important;}
.prev{visibility:hidden!important;}
.next{visibility:hidden!important;}
</style>
<script>
$(document).ready(function(){
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy'
})
$('#gMonth2').on("change", function () {
alert();
//alert($(this).val());
});
});
</script>
<div class="container-fluid" id="content">
<div class="form-group">
<label>First check in:</label>
<input type="text" class="form-control form-control-1 datepicker input-sm from" id="gMonth2" placeholder="CheckIn" >
</div>
</div>

You can use the onSelect() event of datepicker
$('.from').datepicker({
minDate:new Date(),
maxDate:'5yr',
format: 'mm/yyyy',
onSelect: function(dateText) {
//Increase year by 1 & set to other field
}
});

I've tried to reproduce your code in here, I'm getting alert with the value fetched from the input when I change the date on the date picker, your code seems to be working fine.
.

Datepicker - close when clicking outside

Datepicker doesn't close when clicking outside
and if I select 10/09 and current date is 10/ 11 and refresh browser,
then it shows current date 10/11 on <input> tag,
but the selected date on datepicker keep showing 10/09
How do I fix this?
My code is below:
<div class="form-inline" align="right">
<input type="text" name="datepicker" id="datepicker" class="form-control" value='<%=selectDate%>' onchange="hide()">
<script>
$input = $("#datepicker");
$('#datepicker').datepicker({
dateFormat: 'yyyy-mm-dd'
});
$input.data('datepicker').hide = function() {};
</script>
</div>
When I refresh the browser,

Does changing type="text" to type="date" work? Like this JSFiddle

Show selected datepicker date in input box

I have a JQuery DatePicker which I always want to be displayed, so I've assigned it to a div. I want it to behave as shown in this example, where the selected date appears in the input box, but for some reason it just won't work this way for me. Is there anything I can do to have the value shown in the input box? I want the user to be able to either manually type the date into the box, or for them to select the date from the datepicker. This is the relevant part of my code as it stands so far.
<form class="form-horizontal" role="form" action="<?=$_SERVER['PHP_SELF']?>" method="post">
<div class="form-group row">
<input type="text" id="my-input">
<div id="my-datepicker"></div>
</div>
<div class="form-group last">
<input type="submit" name="submit_date" value="Show"/>
</div>
</form>
<script>
$("#my-datepicker").datepicker().on('changeDate', function (e) {
$("#my-input").val(e.format());
});
</script>
This link shows my page so far:
https://gyazo.com/9ad02c1c1e2dbb832894f38107dc8bb9

The example you're trying to follow is quite outdated. The new syntax is as follows:
$("#my-datepicker").datepicker({
onSelect: function (event) {
$("#my-input").val($("#my-datepicker").val());
}
});
Codepen example

Previously asked and answered in Listening to onChange on a jQuery datepicker?
Working example here
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(e) {
console.log("Selected date: " + e + "; input's current value: " + this.value);
$("#my-input").val(e)
}
});
});

How to show just current date in calender?

I have a code of calender in java script. Its in working, want it to automaticaly select current date .its Possible.
Javascript code:
<script>
$(function() {
$( "#interview_on" ).datepicker();
});
</script>
Custom Form:
<form method="POST" action="/interviewvalue/" class="form-horizontal" id="userform" name="uform" enctype="multipart/form-data">{% csrf_token %}
<div class="control-group formSep">
<label for="u_fname" class="control-label">Interview On</label>
<div class="controls">
<input type="text" class="input-xlarge" name="interviewon" id="interview_on" readonly="true" />
</div>
</div>
<div class="control-group">
<div class="controls">
<button class="btn btn-gebo" type="submit" name="asubmit">Submit</button>
<input type="reset" name="reset" value="Cancel" class="btn btn-gebo" />
</div>
</div>

If you want the actual field to be filled with the current date just use the setDate after creating the datepicker. Like this
<script type="text/javascript">
$(function() {
$("#interview_on").datepicker();
$("#interview_on").datepicker('setDate', new Date());
});
</script>
In case you want to restrict the selectable dates to only today, Tobo's suggestion is correct, just do
<script type="text/javascript">
$(function() {
$("#interview_on").datepicker({minDate: 0, maxDate: 0});
$("#interview_on").datepicker('setDate', new Date());
});
</script>

You can restrict the selectable range of the Datepicker like this
$( "#datepicker" ).datepicker({
minDate: -10D, maxDate: "+10D"
});
which shows 10 days of the past and 10 days of the future.
You find a detailed description here http://jqueryui.com/datepicker/#min-max

Disable a jqueryui datepicker

I have a jqueryui datepicker associated with a input text. When i make the input textbox readonly i dont want the datepicker to show up . Is that possible? I would be setting the readonly property to true or false from the code.
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
j$('#chkBoxb').click(function(){
var paramChangeBoxes = j$('input:checkbox.change');
if (j$(this).is(':checked')) {
paramChangeBoxes.removeAttr('checked');
j$('#chkBoxb').attr('checked', 'checked');
j$('#CompleteDate').attr('readonly',false);
j$("#CompleteDate").datepicker();
}
else
{
j$('#CompleteDate').attr('readonly',true);
$( "#CompleteDate:not([readonly])" ).datepicker();
}
});
Updated the code

disable it like this:
$('#dateSelector').datepicker('disable');
and enable it like this:
$('#dateSelector').datepicker('enable');
Here's a working sample: http://jsfiddle.net/CG64h/8/

I ran into this today and unfortunately, the answers provided above did not work. Read the datepicker code, here's how it's done in jqueryui 1.10:
$(selector).datepicker("option", "disabled", true);

Here you go:
<div class="demo">
<p>Date: <input type="text" id="CompleteDate"> <input class="change" type="checkbox" name="chkBoxb" id="chkBoxb"> </p>
</div>
<script>
$('#chkBoxb').click(function(){
if ($(this).is(':checked')) {
$('#CompleteDate').attr('readonly',false)
.datepicker();
} else {
$('#CompleteDate').attr('readonly',true)
.datepicker("destroy");
}
});
</script>

http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerDisabled.html

I believe you should use 2 different textbox's and toggle them as needed so that only one is shown at a time. The first one as plain text box and the second one with jquery Datapicker applied.

if($("#").attr("enabled")=="false") {
$("#").attr("disabled","true");
}

Just change the selector and add :enabled
$( "#datepicker:enabled" ).datepicker();