How I add the month based on the condition - javascript

I want based the dropdownlist to add the month but I have tried several times to code it. I still get the output that one. I am using the jQuery datepicker to add the month
$(function() {
var p = document.getElementById("period");
$(".firstcal").datepicker({
dateFormat: "dd/mm/yy",
onSelect: function(dateText, instance) {
date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
if(document.getElementById("onemonth").value == 1){
date.setMonth(date.getMonth() + 1);
$(".secondcal").datepicker("setDate", date);
}else
if (document.getElementById("threemonth").value == 3){
date.setMonth(date.getMonth() + 3);
$(".secondcal").datepicker("setDate", date);
}else if(document.getElementById("sixmonth").value ==6){
date.setMonth(date.getMonth() + 6);
$(".secondcal").datepicker("setDate", date);
}
}
});
$(".secondcal").datepicker({
dateFormat: "dd/mm/yy"
});
});
<label style="color: #f2f2f2">Pay Period</label> <br/>
<select id="period">
<option>Select the period</option>
<option id="onemonth"value="1">one month</option>
<option id="threemonth"value="3">three month</option>
<option id="sixmonth"value="6">six month </option> <br/>
</select>
<br/><br/>
<label style="color: #f2f2f2" >Date (From,To)</label> <br/>
<input type="text" class="firstcal"> <input type="text" class="secondcal">


You should be checking for the value of the select tag instead of the option tags. Change your script to the following where I am checking the value of the the element with the id of period.
$(function() {
var p = document.getElementById("period");
$(".firstcal").datepicker({
dateFormat: "dd/mm/yy",
onSelect: function(dateText, instance) {
date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
if (document.getElementById("period").value == 1) {
date.setMonth(date.getMonth() + 1);
$(".secondcal").datepicker("setDate", date);
} else
if (document.getElementById("period").value == 3) {
date.setMonth(date.getMonth() + 3);
$(".secondcal").datepicker("setDate", date);
} else if (document.getElementById("period").value == 6) {
date.setMonth(date.getMonth() + 6);
$(".secondcal").datepicker("setDate", date);
}
}
});
$(".secondcal").datepicker({
dateFormat: "dd/mm/yy"
});
});

Related

Displaying difference of only month year range duration using Jquery DatePicker IN n month n year format

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>

How to use beforeShowDay with a foreach in Datepicker

I have a datepicker and a dropdownlist with date values. The dates in the dropdownlist have to be disabled in the datepicker, I try it like this:
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
$("#form_one3 > option:gt(0)").each(function (indx, option) {
var v = [$(this).text()];
//alert(array);
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < v.length; i++) {
if ($.inArray(y + '-' + (m + 1) + '-' + d, v) != -1) {
var string = jQuery.datepicker.formatDate(dateFormat, date);
return [v.indexOf(string) == -1];
}
}
return [true];
});
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
I have it now like this:
; (function ($) {
$(function () {
$("form.xforms-form").bind({
XForms_Enrich: function (e) {
if ($.fn.datepicker) {
$("input.qmatic-dateslot", e.args.data).each(function () {
var inp = $(this);
if (inp.is(":disabled")) return;
var tabindex = inp.attr("tabindex");
var dateFormat = $.xforms.getProperty(inp, 'dateFormat') || 'd-M-yy';
dateFormat = dateFormat.replace(/m/g, '0').replace(/h/gi, '0').replace(/t/g, '').replace(/M/g, 'm').replace('yyyy', 'yy');
$("#" + inp.attr("id") + " ~ button.ui-datepicker-trigger").attr("tabindex", tabindex);
var clearBtn = $('<button class="ui-datepicker-clear" type="button" tabindex="' + tabindex + '">x</button>').click(function () { inp.val(''); inp.change(); return false; });
inp.after(clearBtn);
inp.datepicker({
dateFormat: dateFormat,
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('d-m-yy', date)
return [$('#form_one3 > option:gt(0)[value="' + dt + '"]').length == 0];
},
//beforeShowDay: function (date) {
// $("#form_one3 > option:gt(0)").each(function (indx, option) {
// var v = [$(this).text()];
// //alert(array);
// var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
// for (i = 0; i < v.length; i++) {
// if ($.inArray(y + '-' + (m + 1) + '-' + d, v) != -1) {
// var string = jQuery.datepicker.formatDate(dateFormat, date);
// return [v.indexOf(string) == -1];
// }
// }
// return [true];
// });
//},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
});
$("#ui-datepicker-div").hide();
}
}
})
})
})(jQuery);
But all dates are selectable. for example: 24-7-2015 is in the dropdownlist
This is for example the complete output:
(Selecteer datum)
</option>
<option value="2015-07-24T00:00:00Z">24-7-2015</option>
<option selected="selected" value="2015-07-27T00:00:00Z">27-7-2015</option>
<option value="2015-07-28T00:00:00Z">28-7-2015</option>
<option value="2015-07-29T00:00:00Z">29-7-2015</option>
<option value="2015-07-30T00:00:00Z">30-7-2015</option>
<option value="2015-07-31T00:00:00Z">31-7-2015</option>
<option value="2015-08-03T00:00:00Z">3-8-2015</option>
<option value="2015-08-04T00:00:00Z">4-8-2015</option>
<option value="2015-08-05T00:00:00Z">5-8-2015</option>
<option value="2015-08-06T00:00:00Z">6-8-2015</option>
<option value="2015-08-07T00:00:00Z">7-8-2015</option>
<option value="2015-08-10T00:00:00Z">10-8-2015</option>
<option value="2015-08-11T00:00:00Z">11-8-2015</option>
<option value="2015-08-12T00:00:00Z">12-8-2015</option>
<option value="2015-08-13T00:00:00Z">13-8-2015</option>
<option value="2015-08-14T00:00:00Z">14-8-2015</option>
<option value="2015-08-17T00:00:00Z">17-8-2015</option>
<option value="2015-08-18T00:00:00Z">18-8-2015</option>
<option value="2015-08-19T00:00:00Z">19-8-2015</option>
<option value="2015-08-20T00:00:00Z">20-8-2015</option>
<option value="2015-08-21T00:00:00Z">21-8-2015</option>
</select></div>
Oke, I changed to this:
oke, I changed to this:
beforeShowDay: function (date) {
var dt = $.datepicker.formatDate('yy-mm-dd', date)
return [$('#form_one3 > option:gt(0)[value="' + dt + 'T00:00:00Z"]').length == 0];
},
And that works!! but I want to enable the dates in the dropdownlist and disable all the other dates.

You can try something like
inp = $('input')
inp.datepicker({
dateFormat: 'dd M Y',
beforeShowDay: function(date) {
var dt = $.datepicker.formatDate('d-m-yy', date)
return [$('#form_one3 > option:gt(0)[value="' + dt + '"]').length == 0];
},
changeMonth: true,
changeYear: true,
showWeek: true,
firstDay: 1,
yearRange: "c-100:c+15",
showOn: inp.hasClass("ui-date-picker-onfocus") ? "focus" : "button"
})
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<input />
<select id="form_one3">
<option></option>
<option value="3-7-2015">3-7-2015</option>
<option value="10-7-2015">10-7-2015</option>
<option value="15-7-2015">15-7-2015</option>
<option value="19-7-2015">19-7-2015</option>
<option value="28-7-2015">28-7-2015</option>
<option value="30-7-2015">30-7-2015</option>
</select>

Set an end date based on start date using datepicker

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

Javascript not running correctly on content within asp.net updatepanel

I have a function which adds a custon tooltip to certain dates on a jquery datepicker when the user hovers over them. This is working fine in a normal html page, but I need to make it work on a .net page with an updatepanel...
Here's my code which works...
<input class='propertyAvailabilityCal' />
<select name="startDates" id="startDates" class="startdates">
<option selected="selected" value="%">%</option>
<option value="2013, 11, 01">C1</option>
<option value="2013, 11, 08">C1</option>
<option value="2013, 11, 11">C1</option>
<option value="2013, 11, 18">C1</option>
<option value="2013, 11, 29">C1</option>
</select>
Javascript...
function dateDiffInDays(a, b) {
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / (1000 * 60 * 60 * 24));
}
var firstStartDate;
$('.propertyAvailabilityCal').datepicker({
firstDay: 1,
minDate: 0,
maxDate: '+2Y',
numberOfMonths: 1,
beforeShow: function(input, inst) {
startDates = [];
selectdatesElem = $(input).siblings("select.startdates");
firstStartDate = selectdatesElem.find("option:eq(1)").val().split(', ');
$(input).datepicker('option','defaultDate',dateDiffInDays(new Date(), new Date(parseInt(firstStartDate[1], 10) + "/" + parseInt(firstStartDate[2], 10) + "/" + parseInt(firstStartDate[0], 10))));
$(input).siblings("select.startdates").find("option").each( function() {
startdateParts = $(this).val().split(', ');
startDates.push(startdateParts[0] + ", " + (parseInt(startdateParts[1], 10)-1) + ", " + parseInt(startdateParts[2], 10));
});
},
beforeShowDay: function(date) {
for (i = 0; i < startDates.length; i++) {
if (date.getFullYear()+", "+date.getMonth()+", "+date.getDate() == startDates[i]) {
return [true, 'eventDay',"someText"];
}
}
return [false, ''];
}
});
$(document).on("mouseover", "td.eventDay", function() {
if($(this).hasClass("ui-datepicker-days-cell-over")){
$(this).removeClass('ui-datepicker-days-cell-over').find('a').removeClass('ui-state-hover');
}
else{
$(this).data("title", { popit: $(this).attr("title") }).removeAttr("title").css("position","relative");
if($(this).data("title").popit) {
$(this).append("<span class='detailsPopup' style='position:absolute; z-index:5;'>"+$(this).data("title").popit+"</span>");
}
}
});
$(document).on("mouseleave", "td.eventDay", function() {
$(this).data("title", { popit: $(this).find(".detailsPopup").html() });
$(this).attr("title", $(this).data("title").popit);
$(this).find(".detailsPopup").remove();
});
But if replace the input with an asp:textbox which is not visible on the page until a button is clicked and place it all within an asp.net updatepanel, the custon tooltip on the first available date popups up without hovering (because this is set to be the default date). Is seems to be ignoring the if($(this).hasClass("ui-datepicker-days-cell-over")){ part of the mouseover event.
<%# Page Language="VB" ContentType="text/html" ResponseEncoding="UTF-8" %>
<script runat="server">
Sub CheckAvailability(ByVal Sender as Object, ByVal E as EventArgs)
mydate.Visible = True
mybutton.Visible = False
End Sub
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo</title>
<script type="text/javascript" src="http://www.tomandjayne.co.uk/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://www.tomandjayne.co.uk/Scripts/jquery-ui-1.8.22.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css">
<style type='text/css'></style>
<script type='text/javascript'>
//DATE DIFFERENCE FUNCTION FOR PROPERTY LEVEL DATEPICKER FIRST DATE
var firstStartDate;
function dateDiffInDays(a, b) {
// Discard the time and time-zone information.
var utc1 = Date.UTC(a.getFullYear(), a.getMonth(), a.getDate());
var utc2 = Date.UTC(b.getFullYear(), b.getMonth(), b.getDate());
return Math.floor((utc2 - utc1) / (1000 * 60 * 60 * 24));
}
function pageLoad() {
$('.propertyAvailabilityCal').datepicker({
firstDay: 1,
minDate: 0,
maxDate: '+2Y',
numberOfMonths: 1,
beforeShow: function(input, inst) {
startDates = [];
selectdatesElem = $(input).siblings("select.startdates");
firstStartDate = selectdatesElem.find("option:eq(1)").val().split(', ');
$(input).datepicker('option','defaultDate',dateDiffInDays(new Date(), new Date(parseInt(firstStartDate[1], 10) + "/" + parseInt(firstStartDate[2], 10) + "/" + parseInt(firstStartDate[0], 10))));
$(input).siblings("select.startdates").find("option").each( function() {
startdateParts = $(this).val().split(', ');
startDates.push(startdateParts[0] + ", " + (parseInt(startdateParts[1], 10)-1) + ", " + parseInt(startdateParts[2], 10));
});
},
beforeShowDay: function(date) {
for (i = 0; i < startDates.length; i++) {
if (date.getFullYear()+", "+date.getMonth()+", "+date.getDate() == startDates[i]) {
return [true, 'eventDay',"someText"];
}
}
return [false, ''];
}
});
$(document).on("mouseover", "td.eventDay", function() {
if($(this).hasClass("ui-datepicker-days-cell-over")){
//alert("do nothing");
$(this).removeClass('ui-datepicker-days-cell-over').find("a").removeClass('ui-state-hover');
//$(this).find("span.detailsPopup").remove();
}
else{
$(this).data("title", { popit: $(this).attr("title") }).removeAttr("title").css("position","relative");
if($(this).data("title").popit) {
$(this).append("<span class='detailsPopup' style='position:absolute; z-index:5;'>"+$(this).data("title").popit+"</span>");
}
}
});
$(document).on("mouseleave", "td.eventDay", function() {
$(this).data("title", { popit: $(this).find(".detailsPopup").html() });
$(this).attr("title", $(this).data("title").popit);
$(this).find(".detailsPopup").remove();
});
}
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="UpdatePanelMaster" ChildrenAsTriggers="true">
<ContentTemplate>
<select class="startdates">
<option selected="selected" value="%">%</option>
<option value="2013, 12, 28">1</option>
<option value="2014, 11, 15">1</option>
<option value="2014, 11, 22">1</option>
<option value="2014, 12, 13">1</option>
<option value="2014, 12, 20">1</option>
<option value="2014, 12, 27">1</option>
<option value="2015, 01, 03">1</option>
<option value="2015, 01, 10">1</option>
<option value="2015, 01, 17">1</option>
<option value="2015, 01, 24">1</option>
<option value="2015, 01, 31">1</option>
<option value="2015, 02, 07">1</option>
<option value="2015, 02, 14">1</option>
<option value="2015, 02, 21">1</option>
<option value="2015, 02, 28">1</option>
<option value="2015, 03, 14">1</option>
<option value="2015, 03, 21">1</option>
<option value="2015, 03, 28">1</option>
<option value="2015, 04, 04">1</option>
<option value="2015, 07, 04">1</option>
</select>
<asp:Textbox CssClass="propertyAvailabilityCal" runat="server" ID="mydate" Visible="false" />
<asp:Button runat="server" ID="mybutton" OnClick="CheckAvailability" Text="CHECK AVAILABILITY" CausesValidation="false" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
And I've wrapped my datepicker code in a function pageLoad() { ... }
I've tried to simplify this as much as I can but I fear it might still not make sense. Any help would be much appreciated.
EDIT
OK, I think I'm some way towards working it out... It seems to be running the mouseover event twice, once on an existing hidden datepicker and again when the datepicker is shown. So the second time it is run, the classes have already been removed so it shows the tooltip.
Any ideas why this is happening?

write your code in pageLoad event instead of DOM ready:
function pageLoad(sender,args){
// Code that should get executed again after partial postback
}

Start date must be earlier than end date

I am comparing some dropdownlist value, basically the Start date must be earlier than end date
I found a lot of sample source codes through goggle and others, but they only provide DD/MM/YYYY. I only need MM/YYY only, when ever i tried to remove "DD" there would be errors, if i am right its because of the date keyword/element.
Is there any solution to it? any help or ref link would be good. Thanks
P.s The codes below are working for DD/MM/YYYY
function y2k(number) {
return (number < 1000) ? number + 1900 : number;
}
function padout(number) {
return (number < 10) ? '0' + number : number;
}
function validate(what) {
var startday = what.startday.options[what.startday.selectedIndex].value;
var startmonth = what.startmonth.options[what.startmonth.selectedIndex].value;
var startyear = what.startyear.options[what.startyear.selectedIndex].text;
var endday = what.endday.options[what.endday.selectedIndex].value;
var endmonth = what.endmonth.options[what.endmonth.selectedIndex].value;
unvalidstartdate = startday + '/' + startmonth + '/' + startyear;
unvalidenddate = endday + '/' + endmonth;
var startdate = new Date(startyear - 0, startmonth - 1, startday - 0);
var enddate = new Date(endmonth - 1, endday - 0);
var validstartdate = padout(startdate.getDate()) + '/'
+ padout(startdate.getMonth() + 1) + '/'
+ y2k(startdate.getYear())
var validenddate = padout(enddate.getDate()) + '/'
+ padout(enddate.getMonth() + 1) + '/' + y2k(enddate.getYear());
if (unvalidstartdate != validstartdate) {
alert('Start Date: '
+ what.startday.options[what.startday.selectedIndex].text
+ ' '
+ what.startmonth.options[what.startmonth.selectedIndex].text
+ ' '
+ what.startyear.options[what.startyear.selectedIndex].text
+ ' is invalid');
return false;
}
if (unvalidenddate != validenddate) {
alert('End Date: '
+ what.endday.options[what.endday.selectedIndex].text + ' '
+ what.endmonth.options[what.endmonth.selectedIndex].text
+ ' '
+ ' is invalid');
return false;
}
starttime = Date.UTC(y2k(startdate.getYear()), startdate.getMonth(),
startdate.getDate(), 0, 0, 0);
endtime = Date.UTC(y2k(enddate.getYear()), enddate.getMonth(), enddate
.getDate(), 0, 0, 0);
if (starttime < endtime) {
alert('VALID');
// valid
} else {
alert('NOT VALID');
return false;
}
currentdate = new Date();
currenttime = Date.UTC(y2k(currentdate.getYear()), currentdate
.getMonth(), currentdate.getDate(), 0, 0, 0);
if (endtime < currenttime) {
// valid
} else {
alert('End Date is not less than todays date');
return false;
}
what.startdate.value = validstartdate;
what.enddate.value = validenddate;
return true;
}
//-->
</script>
<form>
Start Date: <select name="startday">
<option value="01">1st
<option value="02">2nd
<option value="03">3rd
</select> <select name="startmonth">
<option value="01">january
<option value="02">february
<option value="03">march
</select> <select name="startyear">
<option>1990
<option>1991
<option>1992
</select>
<p>
End Date: <select name="endday">
<option value="01">1st
<option value="02">2nd
<option value="03">3rd
</select> <select name="endmonth">
<option value="01">january
<option value="02">february
<option value="03">march
</select> <input type="hidden" name="startdate"> <input type="hidden"
name="enddate">
<p>
<input type="button" onClick="validate(this.form)" value="Validate">
</form>

var startDateFinal = "your startdate element value";
var endDateFinal = "your enddate element value";
var startDate = new Date (startDateFinal);
var endDate = new Date(endDateFinal);
if(endDate.getTime() > startDate.getTime()){
// some logic
}
else{
// some logic
}

var invalid=false;
var startDate="03/2011";//start date in mm/yyyy format
var endDate="04/2012";//end date in mm/yyyy format
var startMonth=startDate.substring(0,2);
var endMonth=endDate.substring(0,2);
var startYear=startDate.substring(3);
var endYear=endDate.substring(3);
if(startYear>endYear)
{
invalid=true;
}
else if(startYear<endYear && startMonth>endMonth)
invalid=true;

The Date constructor only needs year and month and you can use strings, so you can use the values directly from the form controls like:
var start = new Date(startyear, --startmonth);
var end = new Date(endyear, --endmonth);
if (start < end) {
// start is before end
}
Oh, and you should be using getFullYear to get the full year number. For compatibility with Java, the original getYear method only returns a two digit year.

The below code will give you two date fields the start date field will be smaller than end date field. the code works fine
you will get the jquery, jqueryui/calendar on http://jquery.com/ and http://jquery.com/ sites.
include below code in HEAD section
include jquery-1.5.1.min.js, jquery-ui-1.8.13.custom.min.js, jquery-ui-1.8.11.custom.css" ,calendar.css" files
$(function() {
var dates = $( "#txt_startdate, #txt_enddate" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 2,
dateFormat: 'yy-mm-dd',
onSelect: function( selectedDate ) {
var option = this.id == "txt_startdate" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
enter below code in body section of your html
<input name="txt_startdate" id="txt_startdate" type="text" />
<input name="txt_enddate" id="txt_enddate" type="text" />
Hope this helps you

try this
function test()
{
var date1,date;
date1 = new Date(2011,11,1);
// startdate drop down values
//2011-->year 11--> startmonth 1-->startdate(this you keep always as 1 for startdate and end date) since you only wants to compare mm/yyyy
date2 = new Date(2002,11,1);
// enddate drop down values
//2011-->year 11--> endmonth 1-->enddate(this you keep always as 1 for startdate and end date) since you only wants to compare mm/yyyy
if(date1>date2)
alert("date1 is > date2")
else
alert("date2 is > date1")
}
check this date

Categories

Resources