Develop Reference

End date does not change when start date is changed in javascript using datepicker

I am trying to work on a start date and end date in javascript using datepicker. I have jQuery 2.1.1. I cannot change the jQuery version because there are other methods that are using this version in the application. The setStartDate, setEndDate and setDate are not changing by clicking or changing the date manually. Any suggestion, tips or help will be greatly appreciated. Here is my code below:
<script>
$(document).ready(function () {
var currentDate = new Date();
$('.hasStartDate').datepicker({
autoClose: true,
changeMonth: true,
changeYear: true,
minDate: '-1m',
maxDate: '+3m',
beforeShowDay: $.datepicker.noWeekends
}).on('changeDate', function(e){
$('.hasEndDate').datepicker('option', 'minDate', e.date),
$('.hasEndDate').datepicker('option', 'maxDate', e.date + 364),
$('.hasEndDate').datepicker('setStartDate', e.date),
$('.hasEndDate').datepicker('setEndDate', e.date + 364),
$('.hasEndDate').datepicker('setDate', e.date + 364),
$('.hasEndDate').datepicker('refresh')
});
$('.hasStartDate').datepicker('setDate', currentDate);
var tdate = $('.hasStarDate').datepicker('getDate');
var ddate = tdate + 364;
$('.hasEndDate').datepicker({
autoClose: true,
changeMonth: true,
changeYear: true,
minDate: tdate + 1,
maxDate: ddate,
beforeShowDay: $.datepicker.noWeekends
}).on('changeDate', function(e){
$('.hasStartDate').datepicker('setEndDate', e.date)
});
$('.hasEndDate').datepicker('setDate', ddate);
});
</script>

This should do the trick. On selecting a date, split it into day, month, year and construct min and max dates and set it using options dynamically.
$(document).ready(function () {
$('.hasStartDate').datepicker({
dateFormat: "yy/mm/dd",
autoClose: true,
changeMonth: true,
changeYear: true,
minDate: '-1m',
maxDate: '+3m',
beforeShowDay: $.datepicker.noWeekends,
onSelect:function(date){
var d = date.split("/");
d = d.map(function(item){return parseInt(item)});
var mindate = new Date(d[0], d[1]-1, d[2]+1);
var maxdate = new Date(d[0], d[1]-1, d[2]+365);
$('.hasEndDate').datepicker('option','minDate',mindate);
$('.hasEndDate').datepicker('option','maxDate', maxdate);
}
});
$('.hasEndDate').datepicker({
dateFormat: "yy/mm/dd",
autoClose: true,
changeMonth: true,
changeYear: true,
beforeShowDay: $.datepicker.noWeekends
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input class="hasStartDate"/>
<input class="hasEndDate"/>

Append date in multiple format using datepicker

I'm using JQuery-UI Calendar. My goal is to identify the day of the week for example Wednesday and format the date in the input like this 07/20/2017.
So far I was able to identify the day of the week using dateFormat:DD by splitting the date.
Now the issue is the input field appends the date like this Wednesday/07/20/2017. While I would like to append it like 07/20/2017
$(function() {
$('#datepicker').datepicker({
dateFormat: 'DD/mm/dd/yy',
changeYear: true,
changeMonth: true,
onSelect: function(dateText, inst) {
var day = dateText.split("/");
console.log(day[0]);
$(".inner").append(day[0]);
$("#datepicker").append(day[1]);
}
})
});
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="datepicker">
<div class="inner">
<p></p>
</div>

Please try this code:
$(function() {
$('#datepicker').datepicker({
dateFormat: 'mm/dd/yy',
changeYear: true,
changeMonth: true,
onSelect: function(dateText, inst) {
var day = dateText.split("/");
console.log(day[0]);
var curDate = $(this).datepicker('getDate');
var dayName = $.datepicker.formatDate('DD', curDate);
$(".inner").append(dayName);
$("#datepicker").append(day[1]);
}
})
});
What I did is this:
Change the dateFromat to 'mm/dd/yy' from 'DD/mm/dd/yy'.
In order to get the name of the day i added this two lines of code
var curDate = $(this).datepicker('getDate');
var dayName = $.datepicker.formatDate('DD', curDate);

how to dynamically disable specific date in jquery datepicker?

I am trying to dynamically disable date (jquery datepicker) which is already in database. I have done static method in that I am able to achieve goal but not getting success in dynamic approach
<script language="javascript">
$(document).ready(function () {
var getfromdb = #Html.Raw(#ViewBag.bookdate);
var result = '\'' + getfromdb.toString().split(',').join('\',\'') + '\'';
var disableddates = [result];
var newdisableddates = ['17/10/2017','18/10/2017','19/10/2017','22/10/2017','23/10/2017','24/10/2017','25/10/2017']; // Static Approach
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [disableddates.indexOf(string) == -1];
}
});
And here is my controller code:
List<string> getbookdate = new List<string>();
getbookdate = BookDate(id);
ViewBag.bookdate = JsonConvert.SerializeObject(getbookdate.ToList());
public List<string> BookDate(int? id)
{
DateTime dt = System.DateTime.Now.Date;
var getbookdate = (from x in entity.BookingMasters
join
y in entity.BookingDetails on x.BookingId equals y.BookingId
where x.ProductId == id && y.FromDate > dt && y.ToDate > dt
select new BookingModel { ProductId = x.ProductId.Value, FromDate = y.FromDate.Value, ToDate = y.ToDate.Value }).ToList();
List<string> allDates = new List<string>();
foreach (var r in getbookdate)
{
for (DateTime date = r.FromDate; date <= r.ToDate; date = date.AddDays(1))
{
allDates.Add(Convert.ToString(date.ToShortDateString()));
}
}
return allDates;
}

Disable doesn't work well with date picker. Try my plnkr.
https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/
It gets the datepicker on click and parses through the dates and data set given and if a match is found it removes the click event on it. and repeats on each render please see my plnkr link for html. Hope it helps
<!--Disable doesn't work well with date picker. Try this. Hope it helps-->
<!--Working example https://embed.plnkr.co/h4RaeIKJVfj9IjyHREqZ/ -->
<!--Code-->
<!--HTML PART-->
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="tether#*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<link data-require="jqueryui#*" data-semver="1.12.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<script data-require="jqueryui#*" data-semver="1.12.1" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
</head>
<body class="container">
<h1>Hello User</h1>
<div class="box">
<div class="box-content">
<div class="row">
<div class="col-md-4">
<label>Date:</label>
<input type="text" id="date-picker-control" />
</div>
</div>
</div>
</div>
<script>
var element = $('#date-picker-control');
element.datepicker();
element.off('click').on('click', function() {
// Setup DatePicker
console.log('Update Date Picker');
// If user changes month or year, update date picker
// based on the date list you have
$("#ui-datepicker-div")
.find("div.ui-datepicker-header")
.find('a.ui-datepicker-next, a.ui-datepicker-prev')
.on('click', function() {
element.click();
});
// Get all available dates in current displayed dates
var availableDates = $("#ui-datepicker-div")
.find("table.ui-datepicker-calendar")
.find('td[data-handler="selectDay"]');
availableDates.filter(function(i) {
var targetDateElement = $(this);
//Get date parts
var year = +targetDateElement.data("year");
var month = targetDateElement.data("month") + 1; //JS fix
var day = +targetDateElement.find('a.ui-state-default').text();
var builtDate = month + '/' + day + '/' + year;
// you can substitute your json data
var targetDates = [
"10/2/2017", "10/6/2017", "10/8/2017"
];
$.each(targetDates, function(i, targetDate) {
// If builtDate match targetdate then turn click event oFF on that date
if (targetDate == builtDate) {
targetDateElement.css({
'border': '1px solid gray',
'background': 'darkgray',
'font-weight': 'bold',
'color': 'gray'
}).off('click');
}
});
});
});
</script>
</body>
</html>

Your original idea is in the right direction, but I think there's probably something weird going on with all the string conversion. I'd just pass through dates and compare with dates rather than all the stringy stuff:
I've written this quick test...
controller:
//Replace with however you get dates
ViewBag.DatesList = new List<DateTime>()
{
new DateTime(2018, 01, 01),
new DateTime(2018, 01, 02),
new DateTime(2018, 01, 03)
};
return View();
View:
<script language="javascript">
$(document).ready(function () {
var disableddates = [];
#foreach (DateTime date in ViewBag.DatesList)
{
//note JS month is zero-based for no good reason at all...
#:disableddates.push(new Date(#date.Year, #date.Month-1, #date.Day))
}
$("#txtFromdate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
$("#txtTodate").datepicker({
minDate: 0,
beforeShowDay: DisableSpecificDates,
dateFormat: 'dd/mm/yy'
});
function DisableSpecificDates(date) {
//filter array to find any elements which have the date in.
var filtereddates = disableddates.filter(function (d) {
return d.getTime() === date.getTime();
});
//return array with TRUE as the first (only) element if there are NO
//matching dates - so a matching date in the array will tell calling
//code to disable that day.
return [filtereddates.length == 0];
}
});
</script>
This appears to work for me.

Display month and year specific datepicker in jquery

Is it possible to show a jquery inline datepicker by a specific month and year? Lets say I want to see the inline datepicker for Nov 2014. And it shows the complete month without selecting any date.

Try to use option-dateFormat like,
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'M yy'
});
});
$(function() {
$( "#datepicker" ).datepicker({
dateFormat: 'M yy'
});
});
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<input id="datepicker"/>
If you want to showonly month and year drop down then try the below snippet
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'M yy',
});
});
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<input id="datepicker"/>

Not only One. You can even create multiple instances of datepicker each of them will be of different month. Look here.
(function(){
for( var i=0; i<5; i++ ){
var dateObj = new Date();
dateObj.setMonth(i);
dateObj.setYear(dateObj.getFullYear());
var dp = $('<div id="calendar' + i + '" > </div>');
$('#Calendar').append(dp);
console.log("Month: "+dateObj.getMonth());
dp.datepicker({defaultDate: dateObj});
}
})();

month picker not working

Hello am not able to display a month picker placed inside a table.
<!DOCTYPE html>
<head>
<script src="js/libs/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css" />
<script src="js/libs/jquery-ui-1.10.3.custom.min.js"></script>
$(function() {
$('.date-picker').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));
}
});
});
</script>
<script>
window.onload = function () {
PreLoadSection();
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<div id="variables" name="variables" style="width:100%; overflow:auto; overflow: scroll;">
</div>
</body>
</html>
above is my htm code and below my .js file
function PreLoadSection()
{
LoadSectionStratified();
}
function LoadSectionStratified() {
$('#variables').append($('<table id="variables_table">'));
$('#variables').append($('<tr>'));
$('#variables').append('<th style="border: 10px">month picker</th>');
$('#variables').append($('</tr>'));
$('#variables').append($('<tr>'));
AddDate_MonthYear_StratifiedSection();
$('#variables').append($('</tr>'));
$('#variables').append($('</table>'));
$('#variables').trigger('create');
}
function AddDate_MonthYear_StratifiedSection() {
table_html = '<td style="min-width: 200px;"><input name="name1" id="id1" value="" class="date-picker"></td>';
$('#variables').append(table_html);
}
above code is how am implemeting it but it doesnt work. am using firefox version 24.
on window load i call the preload function that calls the LoadSectionStratified function

I think it may be because it's a newly appended DOM element, rewrite your $('.date-picker') as:
$(document).on('focus', '.date-picker', function() {
$(this).datepicker({
//Options
});
});
Which will listen to the entire document for any $('.date-picker') which currently exists. I've added a demo with your Code for example:
Fiddle: http://jsfiddle.net/dHYfv/5/
As Juhana mentions, it'll be cleaner to initialise it upon appending it to the DOM, Adjust:
var opts = {
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));
}
};
function AddDate_MonthYear_StratifiedSection() {
var table_html = '<td style="min-width: 200px;">'+
'<input name="name1" id="id1" '+
'value="" class="date-picker" />'+
'</td>';
$('#variables').append(table_html)
.find('.date-picker')
.datepicker( opts );
}
Fiddle: http://jsfiddle.net/dHYfv/6/