Develop Reference

datepicker days and date logic for jquery

on the on _change event of from_date i want to fetch the value of input days and from_date to add the value of days and from_date and set it to to_date
for example input_days=5 and from_date=10/02/2020 it should add and automatically display 15/02/2020 in to_date....
here is the code which adds from_date and to_date and displays total_date but... what should i change in this logic?
$("#fromdate,#todate").datepicker({
minDate: 0,
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'yy/mm/dd',
});
$("#fromdate").datepicker({dateFormat: 'yy/mm/dd'});
$("#todate").datepicker({dateFormat: 'yy/mm/dd'});
$('#enddate').change(function () {
var start = $('#fromdate').datepicker('getDate');
var end = $('#todate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#total_days').val(days);
} else {
alert("cannot select same or previous date!");
$('#fromdate').val("");
$('#total_days').val("");
}
});

Please refer below code. Also please find fiddle link in comment. If input is blank I am adding 5 days by default.
<label class="required">Days</label> <input type="text" id="days"><br/><br/><br/>
<label class="required">from</label>
<input type="text" id="fromDate" class="form-control date-picker from input-append minDate" placeholder="mm/yyyy"><br/><br/><br/>
<label> To </label>
<input type="text" id="toDate" class="form-control date-picker to input-append maxDate" placeholder="mm/yyyy" >
$(function() {
$( ".from" ).datepicker({
onSelect: function( selectedDate ) {
$( ".to" ).datepicker( "option", "minDate", selectedDate );
var toDate = $('.from').datepicker('getDate');
var days = $("#days").val() != "" ? parseInt($("#days").val()) : 5;
toDate.setDate(toDate.getDate() + days );
$('.to').datepicker('setDate', toDate);
}
});
$( ".to" ).datepicker({
onSelect: function( selectedDate ) {
$( ".from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});

I Hope this Helps you ..
$(document).ready(function() {
jQuery("#from").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
jQuery("#to").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onClose: function( selectedDate ) {
jQuery( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<input type="text" id="from">
<input type="text" id="to">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Try this
$(document).ready(function () {
$('#txtFromDate').datepicker({
format: 'dd/mm/yyyy',
startDate: 'd',
minDate: new Date('today'),
language: locale,
autoclose: true,
todayHighlight: true
});
$('#txtToDate').datepicker({
format: 'dd/mm/yyyy',
startDate: '+2d',/change value for to 5 for 5 days
minDate: '#txtToDate',
viewMode: 'years',
language: locale,
autoclose: true,
});

var val = $("#fromdate").val(); // your input date ID, like we have input: 5
var myDate = new Date($.datepicker.formatDate('yy/mm/dd', new Date($('#fromdate').datepicker('getDate'))));
var d = myDate.getDate()+parseInt(val, 10);
var m = myDate.getMonth()+1;
var y = myDate.getFullYear();
$("#todate").val(new Date(yy+'/'+mm+'/'+dd));

setting minDate and maxDate in datepicker

I want minDate and maxDate to get set dynamically everytime on selecting the new date
$("#dtpik1").datepicker({
minDate: "-3M",
maxDate: '0D',
dateFormat: "dd/mm/yy",
onSelect: function(selected, date, value) {
var d = new Date()
var d1 = d.getDate()
var date2 = $("#dtpik1").datepicker("getDate")
date2.setDate(date2.getDate() + 30)
var date3 = $("#dtpik1").datepicker("getDate")
if (d > date2) {
$('#dtpik2').datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: '-4M' && date3,
maxDate: date2
});
$('#dtpik2').datepicker('setDate', date2);
} else {
$('#dtpik2').datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: '-4M' && date3,
maxDate: d
});
$('#dtpik2').datepicker('setDate', d);
}
},
});

Display day name when date is selected from datepicker using jquery

I want to display the day name when date is selected from the datepicker dynamically. When the user selects the particular date from datepicker i want to display which day it is dynamically.How can I fetch the day from the datepicker. Here is the code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7-dayNo);
$( "#datepicker" ).datepicker({
dateFormat: 'yy-mm-dd', firstDay: 1,minDate: mindate
});
});
</script>
<input type="text" id="datepicker">

Use onSelect with custom define day [array] you want to display.
$(function() {
var date = new Date();
var dayNo = date.getDay();
var mindate = (7 - dayNo);
var d = ['sun', 'mon', 'tue', 'wed', 'th', 'fr', 'sat' ];
$("#datepicker").datepicker({
dateFormat: 'yy-mm-dd',
firstDay: 1,
minDate: mindate,
onSelect: function(dateText, inst) {
var today = new Date(dateText);
console.log(d[today.getDay()]);
$('#datepicker').val(dateText + ' ' +d[today.getDay()]);//If you only want day remove dateText concat part
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="datepicker">

you can try this. I hope it will help you:
<input id="datepicker" type="text">
<p class="name"></p>
$( document ).ready(function() {
$("#datepicker").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(dateText, inst) {
var date = $.datepicker.parseDate(inst.settings.dateFormat || $.datepicker._defaults.dateFormat, dateText, inst.settings);
var dateText = $.datepicker.formatDate("DD", date, inst.settings);
$("p.name").html( "Day Name= " + dateText ); // Just the day of week
}
});
});

Hide div on date-time picker click

In this image when i select value from drop down and select dates then container is displayed and then when i select row from table data then cont and sumdata div is displayed now i want when i select again dates from date picker then want to hide all divs ... and when click on search then want to display container
<script type="text/javascript">
$(function () {
var currentYear = (new Date).getFullYear();
var currentMonth = (new Date).getMonth();
var currentDay = (new Date).getDate();
$('#fromdate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
//minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: new Date(currentYear, currentMonth, currentDay),
//maxDate: new Date((currentYear + 1), 12, 1),
onSelect: function (selectedDate) {
// Start Date
var startDate = $(this).datepicker('getDate');
//startDate.SetHours(0);
//startDate.setMinutes(0);
//startDate.setSeconds(0);
$('#todate').datepicker('option', 'minDate', startDate);
$('#todate').datepicker('setDate', startDate);
// End Date
var enddate = $(this).datepicker('getDate');
enddate.setDate(enddate.getDate() + 60);
// endDate.setMonth(endDate.getMonth() + 2);
$('#todate').datetimepicker('option', 'maxDate', enddate);
}
});
$('#todate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: '+30',
//maxDate: endDate.setMonth(endDate.getMonth() + 2)
});
$('#fromdate').on('click', function () {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
});
$("#todate").datepicker({
onSelect: function (dateText) {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
}
});
});
</script>

Use the onselect option to execute any JavaScript transformations
e.g.:
$(".datepicker").datepicker({
onSelect: function(dateText) {
// hide your divs
$('.mydivs').hide();
}
});
http://api.jqueryui.com/datepicker/#option-onSelect
working fiddle:
https://jsfiddle.net/7dy0wduc/

Need help got stuck in javascript date picker

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
var d = "02-12-2016";
$(function () {
$("#datepicker").datepicker({
minDate: d,
dateFormat: 'mm-dd-yy';
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"> <input type="text" id="final"></p>
</body>
</html>
Hello friends i am using this var d="02-12-2016" and i want to show a next date in a text field which is in front of date picker and that text box will have a date 02-15-2016
I am working on it and i am not getting any way how it will be done.

according to api doc : jquery-ui-1.11 it work either.
minDate: d,
dateFormat: 'mm-dd-yy',
defaultDate: d,
altField: '#final'

It's better to use ISO format for date operations:
var d = "2016-02-12";
$(function() {
$("#datepicker").datepicker({
minDate: d,
dateFormat: 'yy-mm-dd',
onSelect: function(date) {
$("#final").val(secondDate(date));
}
});
});
function secondDate(date) {
var d = new Date(date);
d.setDate(d.getDate() + 3);
var month = '' + (d.getMonth() + 1);
var day = '' + d.getDate();
var year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}