I need to set a start date using datepicker (allows future dates only) and then set an end date based on chosen day from particular month where end date will be last day of chosen month from Start Date.
HTML code looks like:
<fieldset>
<label for="dataStart">Start Date</label>
<input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
</fieldset>
<fieldset>
<label for="dataEnd">End Date</label>
<input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="<!-- last day of mont from dataStart -->" readonly />
</fieldset>
jQuery code:
function getLastDayOfYearAndMonth(year, month)
{
return(new Date((new Date(year, month + 1, 1)) - 1)).getDate();
}
$(document).ready(function() {
$("#dataStart").datepicker({
minDate: 1,
onSelect: function(theDate) {
var defalulDate = new Date();
defalulDate.getLastDayOfYearAndMonth(date.getFullYear(), date.getMonth()));
$("#dataEnd").datepicker(defaultDate: defalulDate);
},
beforeShow: function() {
$('#ui-datepicker-div').css('z-index', 9999);
},
dateFormat: 'mm/dd/yy'
});
});
Somehow I'm not able to get End Date functionality to work.
This is the working fiddle....
HTML
<p>From Date: <input type="text" id="fromDatePicker"></p>
<p>To Date: <input type="text" id="toDatePicker"></p>
JavaScript
var dateToday = new Date();
$(function() {
$( "#fromDatePicker" ).datepicker({
minDate: dateToday,
onSelect: function(selected,evnt) {
var date = $(this).datepicker('getDate'),
day = date.getDate(),
month = date.getMonth() + 1,
year = date.getFullYear();
updateToDate(day,month,year);
}
});
});
function updateToDate(day,month,year){
var myDate = new Date();
var updatedDay;
if(month==9|| month==4 ||month==6 || month==11){
updatedDay = 30;
}
else if (month==2){
updatedDay = 28;
}
else{
updatedDay = 31;
}
var prettyDate =month+ '/' +updatedDay + '/' +year;
$("#toDatePicker").val(prettyDate);
}
$(function() {
$( "#toDatePicker" ).datepicker({
minDate: dateToday
});
});
Below accurate version and w/o "February leap year" bug:
HTML:
<fieldset>
<label for="dataStart">Start Date</label>
<input type="text" style="width: 88px;" class="datepicker" id="dataStart" size="10" name="dataStart" />
</fieldset>
<fieldset>
<label for="dataEnd">End Date</label>
<input type="text" style="width: 88px;" class="end_date" id="dataEnd" size="10" name="dataEnd" value="" readonly />
</fieldset>
<div>Days counted between dates: <span id="calculated"></span></div>
jQuery:
$(document).ready(function() {
$("#dataStart").datepicker({
minDate: '+1d',
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
onSelect: function(date){
var dates = date.split('/');
var lastDate = new Date(dates[2], dates[0], 0);
var y = lastDate.getFullYear(), m = lastDate.getMonth(), d = lastDate.getDate();
m = ('0'+ (m+1)).slice(-2);
$('#dataEnd').val(m+'/'+d+'/'+y);
var start = $('#dataStart').datepicker('getDate');
$('#dataEnd').datepicker({dateFormat: 'mm/dd/yy'}).datepicker('setDate', m+'/'+d+'/'+y);
var end = $('#dataEnd').datepicker('getDate');
var days = ((end - start)/1000/60/60/24)+1;
$('#calculated').text(days);
}
});
});
and JSFiddle
PS.
Thanks to Sµßhrånil∂ from jQuery Forum for tips
Related
I'm trying to disabled a previous dates from current date it's working fine. but when it try to disabled "to Date date picker" after 90Days but it's not working any one can you please help on it. actually here i have a two date pickers like FROM Date and TO Date but i am not able to disabled dates after 90days here I want to allow the from date only current date To date enabled only next 90 days from current date.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
</head>
<body>
<label for="date">From:</label>
<input id="date" data-provide="datepicker">
<label for="todate">To:</label>
<input id="todate" data-provide="datepicker">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
<script>
var date = new Date();
date.setDate(date.getDate());
$('#date').datepicker({
startDate: date
});
var todates = new Date();
todates.setDate(dates.getDate()+90D);
$('#todate').datepicker({
endtDate: todates
});
</script>
</body>
</html>
Checkout snippet with output as you expected. In datepicker you need to add some specific formatted date. And using that we disabled un wanted days as per requirement.
For adding days in javascript date :
var todates = new Date();
todates.setDate(cur_date.getDate() + 90);
Here 90 are actual days you can modify it as per usage.
var cur_date = new Date()
var todaydate = cur_date.toISOString().split('T')[0]
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [day, month, year].join('-');
}
todaydate = formatDate(todaydate);
$('#fromdate').datepicker({
beforeShowDay: function(date){
if (todaydate == formatDate(date))
{
return { enabled: true }
}
else
{
return { enabled: false }
}
},
startDate: cur_date,
endDate: cur_date,
});
var todates = new Date();
todates.setDate(cur_date.getDate() + 90);
$('#todate').datepicker({
startDate: cur_date,
endDate: todates
});
.disabled {
background: #ccc;
pointer-events: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<label for="fromdate">From:</label>
<input id="fromdate" data-provide="datepicker">
<label for="todate">To:</label>
<input id="todate" data-provide="datepicker">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
If you want to add more functional things like this you can try out more here
when I select date and input month duration then other field will display the target date
how can I implement this,Please anybody help me to do that.my form is that
// I have tried to do that
$("#duration").keyup(function(){
var duration = $(this).val();
var open_date = $("#openDate").val();
// i want to use same function and method
// here will next code
var targetDate = new Date(open_date);
targetDate.setMonth(targetDate.getMonth() + duration);
var dd = targetDate.getDate();
var mm = targetDate.getMonth() + 1;
var yyyy = targetDate.getFullYear();
var dateString = dd + "/" + mm + "/" + yyyy;
$('#targetDate').val(dateString);
// i have do that but do not get my espect out put
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Open Date :
<input type="date" id="openDate"><br><br>
Duration Month:
<input type="text" id="duration" placeholder="mm"><br><br>
Target Date :
<input type="text" id="targetDate" placeholder="dd-mm-yyyy">
Please try this:
$("#duration").keyup(function(){
var duration = $(this).val();
var open_date = $("#openDate").val();
// i want to use same function and method
// here will next code
var targetDate = new Date(open_date);
targetDate.setMonth(targetDate.getMonth() + parseInt(duration));
var dd = targetDate.getDate();
var mm = targetDate.getMonth() + 1;
var yyyy = targetDate.getFullYear();
var dateString = dd + "/" + mm + "/" + yyyy;
$('#targetDate').val(dateString);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Open Date :
<input type="date" id="openDate"><br><br>
Duration Month:
<input type="text" id="duration" placeholder="mm"><br><br>
Target Date :
<input type="text" id="targetDate" placeholder="dd-mm-yyyy">
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
}
});
});
Currently I am building some application and I need to take the difference of the month and year range selected by user, but its not working for me.
I'm just getting the date selected by user, but not the difference. The datepicker method is giving the current system date.
What I want is
from date: Aug-2016
To date: Sep-2017
Difference: 1 month 1 year
AND
from date: Aug-2017
To date: Oct-2017
Difference: 2 month
Any suggestions
$("#from, #to").datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
//button click function
$("#btnShow").click(function(){
if ($("#from").val().length == 0 || $("#to").val().length == 0){
alert('All fields are required');
} else {
alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
}
});
.ui-datepicker-calendar {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>
Please find below mentioned solution. Here you can find difference between range in months.
$(document).ready(function() {
$("#from").datepicker({
dateFormat: 'yy-mm',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShow: function(input, inst) {
if (!$(this).val()) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
}
},
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
$("#to").datepicker("option", {minDate: new Date(inst.selectedYear, inst.selectedMonth, 1)})
}
});
$('#from').datepicker('setDate', new Date());
$('#to').datepicker({
dateFormat: 'yy-mm',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)).trigger('change');
}
});
$("#btnShow").click(function() {
if ($("#from").val().length == 0 || $("#to").val().length == 0) {
alert('All fields are required');
} else {
var startDay = new Date($("#from").val());
var endDay = new Date($("#to").val());
var date2_UTC = new Date(Date.UTC(endDay.getUTCFullYear(), endDay.getUTCMonth()));
var date1_UTC = new Date(Date.UTC(startDay.getUTCFullYear(), startDay.getUTCMonth()));
var months = date2_UTC.getMonth() - date1_UTC.getMonth();
if (months < 0) {
date2_UTC.setFullYear(date2_UTC.getFullYear() - 1);
months += 12;
}
var years = date2_UTC.getFullYear() - date1_UTC.getFullYear();
if (years > 0) {
if(months > 0)
$('#result').html(years + " year " + " " + months + " month");
else
$('#result').html(years + " year ");
} else {
$('#result').html(months + " month");
}
}
});
});
.ui-datepicker-calendar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<style>.ui-datepicker-calendar {display: none;}</style>
<div style="text-align:center;">
<label for="from">From</label>
<input type="text" id="from" name="from" readonly="readonly" />
<label for="to">to</label>
<input type="text" id="to" name="to" readonly="readonly" />
<input type="button" id="btnShow" value="Show" />
</div>
<div id="result"></div>
having this as intial code
<input type="date" class="closed_road_permit_expiry_date" min="2000-01-01" max="9999-01-31" name="closed_road_permit_expiry_date[]" value="value="2000-01-31" />
i tried doing this
<input type="date" class="closed_road_permit_expiry_date" min="2000-01-01" max="9999-01-31" name="closed_road_permit_expiry_date[]" id="currentDate" value=getCurrentDate()/>
function getCurrentDate() {
document.getElementById("currentDate").valueAsDate = new Date()
}
You cna run an IIFE to populate the field with the current data
(function getCurrentDate() {
return document.getElementById('currentDate').valueAsDate = new Date();
}())
<input type="date" class="closed_road_permit_expiry_date" min="2000-01-01" max="9999-01-31" name="closed_road_permit_expiry_date[]" id="currentDate" />
run getCurrentDate() function on window.onload not with value of the input
function getCurrentDate() {
document.getElementById("currentDate").valueAsDate = new Date()
}
window.onload = function() {
getCurrentDate()
}
<input type="date" class="closed_road_permit_expiry_date" min="2000-01-01" max="9999-01-31" name="closed_road_permit_expiry_date[]" id="currentDate" />
Try this:
function getCurrentDate() {
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var datestr = day + "/" + month + "/" + year;
document.getElementById("currentDate").value = datestr;
}
$(document).ready(function(){
getCurrentDate();
});