My application requires that the date picker should display the calender body on click, select date today's date being active and future date deactivated... i am new in jquery and it has disturbed me for a month. assist please. I am able to display the datepicker and choose any date upto 2030, but i need the calender to be active upto today's date or current date only.
thanks in advance.
my calender to be displayed..
<table id="calenderTable" class="">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center">
<select onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value,
this.selectedIndex, false));" id="selectMonth">
<option value="0">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select>
</td>
<td colspan="2" align="center">
<select onChange="showCalenderBody(createCalender(this.value,
document.getElementById('selectMonth').selectedIndex, false));" id="selectYear">
</select>
</td>
<td align="center">
<font color="#003333" size="+1">X</font>
</td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr style="">
<td>Sun</td><td>Mon</td><td>Tue</td><td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td>
</tr>
</tbody>
<tbody id="calender"></tbody>
</table>
the date field is as below:
<tr>
<td>effected date</td>
<td>
<input type="text" name="eff_date" class="required" id="eff_date"><a href="#" onClick="setYears(1947, 2030);
showCalender(this, 'eff_date');" class="" id="calender">
<img src="Calender/calender.png"></a>
</td>
</tr>
This is pretty simple to accomplish assuming I understand the question. You want to set the maximum allowable selectable date, correct? All you need to use is the maxDate option.
Here is a complete example, assuming you include the proper files referenced in the script and link tags:
<!DOCTYPE HTML>
<html>
<head>
<title>date</title>
<meta charset="utf-8">
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>
</div>
<script>
$(function() {
$("#datepicker").datepicker({maxDate: '+0d'});
});
</script>
</body>
</html>
You can see it working here:
http://gigaloop.com/answers/date.html
You can use maxDate and combine with minDate:
http://jqueryui.com/demos/datepicker/#option-maxDate
Within script tags, write:
$(function() {
$( "#datepicker-1" ).datepicker({
minDate:"Now", maxDate: "+1m+1d"
});
});
You can change minDate to "-1m" if you want to show dates from 1 month ago and 1 month in the future. As per your question, you can put maxDate: "+1d" if you want to disable future days from today.
1y=1year,1m=1month,1d=1day.
Related
I am having a textbox with an input type as DATE, Date of Promotion and a dropdown box with the label name DNI. A hidden textbox with an ID pf have to be assigned with the selected date. But, the date textbox is taking the system date format.
a) How can it be fixed to dd-mm-yyyy format irrespective of the system date format ?
b) Another hidden textbox will be appear on selection of the drop down box with a specific date. It should be toggle between 01-07-2023 (dd-mm-yyyy) or 01-01-2023 (dd-mm-yyyy) basing on the selection of the dropdown box. But here, I am getting the month and year correctly and date is as in the pf. How can I get the date as "01st"?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Date of Promotion</td><td><input class="form-control" type="date" name="dop" id="dop" autocomplete="off" /></td>
</tr>
<tr>
<td>DNI</td><td><select class="form-control" name="dni" id="dni" autocomplete="off">
<option value="0">Select</option>
<option value="1">01st January</option>
<option value="2">01st July</option>
</select></td>
</tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td>
Pay from <input type="text" id="pf" style="width:100px; border:0; font-weight:bold; color:red;" readonly/>
Revised Pay from <input type="text" id="nid" style="width:100px; border:0; font-weight:bold; color:red;" readonly/>
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#dni').on('click', function() {
$('#pf').val($('#dop').val());
if ( this.value == '1')
{
var revDate = new Date($("#dop").val());
var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 8));
var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
document.querySelector("#nid").value = revisedate;
}
else if ( this.value == '2')
{
var revDate = new Date($("#dop").val());
var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 2));
var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
document.querySelector("#nid").value = revisedate;
}
});
});
</script>
</body>
</html>
I want to change the value of an html table text element using a toggle and dropdown. When the option is selected, the HTML table text element should change numbers. Here is the html and jQuery I have so far.
<select name="subject" id="subject">
<option value="option1" id="xTest">Option 1</option>
<option value="option2" id="yTest">Option 2</option>
</select>
<table>
<tr>
<td id="testing">Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
and the jQuery
<script>
$(document).ready(function() {
$("#xTest").click(function(){
("#testing").text("change");
});
})
$(document).ready(funtion() {
$(#yTest).click (function(){
("#testing").text("change2");
});
})
</script>
When selecting either dropdown (#xTest or #yTest), the value of #testing isn't changing. Do I need to add an a href attribute to the html? This wouldn't make sense to me, however, because I am not adding a link.
Any help would be much appreciated.
Thank you!
Events are not supported cross browser on <option> elements. Instead use the change event on the <select> and use it's value to determine the text to display
$("#subject").change(function() {
const txt = 'change ' + (this.value === 'option1' ? 1 : 2)
$("#testing").text(txt);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="subject" id="subject">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<table>
<tr>
<td id="testing">Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
</tr>
</table>
Monitor <select> changes using jquery like this:
$('#subject').change(function () {
const text = 'change ' + (this.value === 'option1' ? 1 : 2)
$("#testing").text(text);
});
Following is the html that I am using I want to add one tr between first two trs but it is not working.
I want to add a html tag and include class for first two tr. How can I achieve that? I do not want to include the submit button's tr in it.
<table cellspacing="0" id="content-space" class="content-space">
<tr>
<td>
Subscription Plan:
</td>
<td>
<select id="PlanNameId" style="width:auto !Important" name="data[][PlanNameId]">
<option value="4">
Disable
</option>
<option selected="selected" value="2">
Free
</option>
<option value="1">
Bronze
</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td>
Auto Upgrade:
</td>
<td>
<select id="SubscriptionSetting" name="data[][SubscriptionSetting]">
<option value="1">
Yes
</option>
<option selected="selected" value="0">
No
</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2" class="signin-button-containers">
<input type="submit" value="Submit" id="subscriptionsubmit" class="primaryLargeButton">
</td>
</tr>
You can simply get the first tr and then insert the new row right after it. With jQuery this is very easy, but without any libraries it can also be done without too much effort.
$("table tr").first().after("<tr><td>Inserted data</td><td>More data in between</td></tr>")
Example: http://jsfiddle.net/qnu3c0uk/1/
Given:
<table>
<tr>
<td>Text</td>
</tr>
<tr>
<td>Text 2</td>
</tr>
<table>
And that you want to insert a table row (with a cell) after the first table row i would do:
$("table tr:first-of-type").after($("<tr>").append("<td>"));
If you then want to add a class to the first and the new row, i would do:
$("table tr:eq(0),table tr:eq(1)").addClass("row-class");
Or actually combining the two parts to:
var $newRow = $("<tr>").addClass("new-class");
var $firstRow = $("table tr:first-of-type").addClass("new-class");
$firstRow.after($newRow.append("<td>"));
I am trying to make a form using two drop down select menus: one to select the category, the other to select a subcategory. I am trying to make it so the subcategory options are based on which category they select first, I don't know where to begin on this and a google search is leaving me empty handed. Thanks!
This is what you want:
Note that this is only using html and pure javascript. Yes you can use JQuery too.
<html>
<head>
<script language="javascript" type="text/javascript">
function dropdownlist(listindex)
{
document.formname.subcategory.options.length = 0;
switch (listindex)
{
case "category1" :
document.formname.subcategory.options[0]=new Option("subcategory1.1","value1.1");
document.formname.subcategory.options[1]=new Option("subcategory1.2","value1.2");
document.formname.subcategory.options[2]=new Option("subcategory1.3","value1.3");
break;
case "category2" :
document.formname.subcategory.options[0]=new Option("subcategory2.1","value2.1");
document.formname.subcategory.options[1]=new Option("subcategory2.2","value2.2");
document.formname.subcategory.options[2]=new Option("subcategory2.3","value2.3");
break;
case "category3" :
document.formname.subcategory.options[0]=new Option("subcategory3.1","value3.1");
document.formname.subcategory.options[1]=new Option("subcategory3.2","value3.2");
document.formname.subcategory.options[2]=new Option("subcategory3.3","value3.3");
break;
default:
document.formname.subcategory.options[0]=new Option("Select Category")
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="category1">category 1</option>
<option value="category2">category 2</option>
<option value="category3">category 3</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
document.write('<select name="subcategory"><option value="">Select Sub-Category</option></select>')
</script>
<noscript><select name="subcategory" id="subcategory" >
<option value="">Select Sub-Category</option>
</select>
</noscript></td>
</tr>
</table>
</form>
</body>
</html>
Search for cascading dropdowns. This would Need to some JavaScript or maybe some server side code but with this search term you will find tons...
And start from here http://archive.plugins.jquery.com/plugin-tags/drop-down
<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="1">Normal Devliery + 10.00</option>
<option value="2">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
#{
var total = Model.CartTotal;
}
#total
</td>
</tr>
Basically if a user selects next day delivery. I want 20 to be added to #total?
I thing you are going about this the wrong way. You either update some input value with javascript, or use the NxtDay value in your controller action to assign the correct value, depending on the selection.
ADDED:
What you want to do is something like this: (I am assuming you are using jquery, since it come with MVC3).
HOWEVER: You should check out some tutorial if you are starting. This is pretty basic stuff and you won't go far without having to come back here unless to read up on this sutff.
<tr>
<td>
Delivery
</td>
<td>
<div class="confdelivery">
<select id="NxtDay" name="NxtDay">
<option selected="selected" value="10">Normal Devliery + 10.00</option>
<option value="20">Next Day Delivery + 20.00</option>
</select>
</div>
</td>
</tr>
<tr>
<td>
Total
</td>
<td>
<span id="totalValue" style="display: none">#Model.CartTotal</span>
<span id="totalWithShipping">0</span>
<input id="hiddenTotal" type="hidden" value="0">
</td>
</tr>
<script>
$(document).ready(function () {
$('#NxtDay').change(function() {
addToTotal();
});
});
function addToTotal(){
$('#totalWithShipping').html($('#totalValue').html() + $("#NxtDay option:selected").val());
$('#hiddenTotal').val($('#totalWithShipping').html());
}
</script>