Develop Reference

How to show only 3 months in datepicker as dropdown from current date and when the current month is completed then we have show the upcoming 3 months

How to show only 3 months in date picker as a dropdown from the current date and when the c
$(function() {
$("#date").datepicker({
hideIfNoPrevNext: true,
minDate: '0M',
maxDate: '+90D'
});
});
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-2">
Select Date</label>
<input type="text" id="date" />
</div>
</div>
</div>
Current month is completed then we have show the upcoming 3 months.

What Datepicker library/plugin are you using? Its really hard for us to give you a solution if we don't know what you're using.
In anycase, you can disable the dates on datepicker based on today's date. This is how we can do it using Moment.js
const disabledDate = current => {
return (
current &&
current >=
moment()
.endOf('day')
.subtract(number, days/months/years) //if you want to get past days
.add(number, days/months/years) //if you want to add days
);
};

set Default date in datepicker with Tuesdays & Wednesdays only?

I have a datepicker that has all past days disabled, and all days except Tuesdays and Wednesdays disabled.
I'd like the default day to be the frist enabled day of the week. If it's tuesday, then it should display tuesday, If wednesday, then wednesday. Any other day it should display next tuesday in the input field.
This is the code I'm using for the datepicker.
<script type="text/javascript">
$(document).ready(function(){
$( ".datepicker" ).datepicker({
minDate:'0',
changeMonth:true,
changeYear:true,
beforeShowDay:
function(dt)
{
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
}});
});
</script>
And the input that I'm using the selector on:
<form method="POST">
<div style='margin:0 auto; text-align:center;'>
<label>Appointment Date: </label>
<input type="hidden" name="action" value="list_appointments" />
<input type="text" id="datepicker" name="date" class="datepicker" />
<!--value=--><?php #echo date_format(new DateTime("now",new DateTimeZone('America/Chicago')),'m/d/Y');?>
<input type="submit" value="Refresh List" name="Update" />
<br />
</div>
</form>

You can use momentjs to make getting the next day of the week a little easier and then just have a if-else statement to get the correct day of the week:
function setDate() {
var today = moment().isoWeekday(); //or just = new Date().getDay();
if (today <= 2) {
return moment().isoWeekday(2);
} else if (today === 3) {
return moment().isoWeekday(3);
} else {
return moment().add(1, 'weeks').isoWeekday(2);
}
}
Call the setDate() function then and set that return value as the date in the datepicker.
$('.datepicker').datepicker("setDate", new Date(setDate()));
Here's a working example: https://jsfiddle.net/jutcw0ve/

How to restrict 2nd date picker no more than below the 1st date picker's selected date?

I am using Materialize's custom Pickadate datepicker.
This is my HTML and I am using Materialize css
<div class="col s12 m6">
<input type="date" id="check_in" class="datepicker1">
<label for="Check-in">Check in date</label>
</div>
<div class="col s12 m6">
<input type="date" id="check_out" class="datepicker2">
<label for="check_out">Check out date</label>
</div>
And here is my Javascript.
<script type="text/javascript">
$('.datepicker1').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 1, // Creates a dropdown of 15 years to control year
min: true,
format: 'yyyy, mmmm d'
});
$('.datepicker2').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 1, // Creates a dropdown of 15 years to control year
min: true,
format: 'yyyy, mmmm d'
});
</script>

You would run the following code when the first date picker is changed. picker would be your first datepicker and picker2 would be your second datepicker. Onchange, grab the first picker's date and assign it as the minimum on the second picker.
var date = picker.get()
picker2.set('min', date)
http://amsul.ca/pickadate.js/api/

How to change date format of datepicker value in javascript

I gone to many of the questions already asked in stackoverflow related to my problem, but i still i can't find any solution. I am trying to get the value from datpicker in my javascript function, but not able to change its format. By default its showing in mm/dd/yy format and i want in yyyy-mm-dd format. Can anyone please help.
Below is my html code :
<html xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<script>
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
$.datepicker.formatDate( 'yy-mm-dd' ,date );
alert(date); }
</script>
</h:head>
<body>
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
<span class="input-group-addon">To</span>
<input type="text" id="todate" class="form-control dpd2" name="to" placeholder="Select To Date" ></input>
<input type="button" onclick="getdate()" value="Change Date"></input>
</body>
</html>
Thanks in advance.

<script>
$(document).ready(function(){
$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
alert(date);
}
</script>

The format of dates can be a combination of any of the following characters:
d – day of month (single digit where applicable)
dd – day of month (two digits)
m – month of year (single digit where applicable)
mm – month of year (two digits)
y – year (two digits)
yy – year (four digits)
D – short day name
DD – full day name
M – short month name
MM – long month name
'...' – any literal text string
# - UNIX timestamp (milliseconds since 01/01/1970)

function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
date = $.datepicker.formatDate( 'yy-mm-dd', date );
alert(date);
}
You need to assign the result of the formatDate call to your date object. Then you can alert it.

HTML
<input type="text" id="fromdate" class="datepicker form-control dpd1" name="from" placeholder="Select From Date"></input> <span class="input-group-addon">To</span>
<input type="text" id="todate" class="datepicker form-control dpd2" name="to" placeholder="Select To Date"></input>
<input type="button" class="getdate" value="Change Date"></input>
JavaScript
//Define fields with class name 'datepicker' as jQueryUI datepicker
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd' //Setting dateformat for the datepicker
});
//Binding 'onclick' function for the button with class name 'getdate'
$('.getdate').on('click', function () {
var date = $('#fromdate').val();
alert(date);
});
JSFiddle

Its works for me
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
$('#fromdate').datepicker({
format: 'yyyy/mm/dd'
});

Bootstrap Datepicker - Set startView: 'decade', but not current decade

Currently I have the startView showing the current decade, which is ok but I want to make the previous decade be the startView - not the current decade.
this.dobDatePickerView = new DatePickerView({
el: this.$('[name="dob"]'),
startView : 'decade',
endDate : this.sandbox.dates().fwFormat('date'),
value : this.sandbox.dates().subtract('years', 18).fwFormat('date')
}).render();
I want to subtract 18 years from the decade view default selected year, so instead of '2013' being pre-selected it should default to 1995.

This could work: (demo):
<div class="input-append date" id="dp1" data-date="01-01-1990" data-date-format="dd-mm-yyyy" data-date-viewmode="years">
<input class="span2" size="16" type="text" readonly>
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$('#dp1').datepicker();
</script>
By separating the datepicker from the input and setting a default value on the picker but not the input, you can get something that will only populate a date once a date is selected but start at any value you please.

https://github.com/eternicode/bootstrap-datepicker#setstartdate
perhaps try calling setStartDate() on the datePicker, when it is clicked/opened, and set the date ten years ago