We Keep Coding

How to Cancel one job as per month in Javascript

How to Cancel a one job as per month in javascript.when i click on cancel button i want to get the popup also mention with message "you cancel 1 job as per month and yes or no" please help me.. i am very stuck in that code.

I'm not sure if you are using a database or not, but to get things going you need to attach a change or click event on the checkbox. An example of a change event is below:
document.addEventListener('DOMContentLoaded', function() {
let checkboxEl = document.getElementsByName("theJob")[0]; // a lot of different ways to select the dom element
let spanEl = document.querySelector(".js_strikeThrough");
let checkAttr = checkboxEl.getAttribute('data-cancel');
checkboxEl.addEventListener("change", function(event) {
if(checkAttr) {
checkAttr = !checkAttr;
spanEl.classList.add("strikeThrough");
} else {
spanEl.classList.remove("strikeThrough");
checkAttr = !checkAttr;
}
}, false);
}, false);
.strikeThrough{
text-decoration: line-through;
}
<form>
<input type="checkbox" data-cancel="false" name="theJob" value="Clean"><span class="js_strikeThrough">Wash Car</span>
</form>
Where the checkAttr value is being changed in the above snippet, is where you would need to call your database methods to update the value in the database and add popup messages. Not sure what db you are using.

Execute function on second click in jquery

I have a calendar button that on click opens up a date picker and places the date into an input text box. What I want to happen, is have a second text box auto-fill with the date 30 days into the future. What I am having trouble with is getting this to work with jquery.
HTML:
<tr>
<td align = "center">Entry Date From: <input id="ENTRYDATEFROM" name="ENTRYDATEFROM" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc"></td>
<td align = "center">Entry Date To: <input id="ENTRYDATETO" name="ENTRYDATETO" type="text" maxLength="10" size="12" value="">
<img height="20"src="calendarsrc" id="entrySrc2"></td>
</tr>
JQUERY:
$(document).ready(function() {
$("#entrySrc").click(function(){
gAnytime.fPopCalendar(document.myform.ENTRYDATEFROM);
});
$("#entrySrc2").click(function(){
gAnytime.fPopCalendar(document.myform.ENTRYDATETO);
});
//Tried this but had no success
//$(document).on("change", "#entrySrc", populate);
});
function populate(){
var q = $("#ENTRYDATEFROM");
var dateTo = new Date(q.val());
var newDate = new Date(dateTo.setDate(dateTo.getDate() + 30));
var formatted = padNumber(newDate.getUTCMonth() + 1) + '-' + padNumber(newDate.getUTCDate()) + '-' + newDate.getUTCFullYear();
$("#ENTRYDATETO").val(formatted);
}
function padNumber(number) {
var string = '' + number;
string = string.length < 2 ? '0' + string : string;
return string;
}
This is what my GUI looks like before anything is clicked:
This is what happens when I click the #entrySrc calendar button located to the right of the input text box
I can then click on any date that I wish within that calendar box. This will populate the input text box to the left of it.
How can I execute my populate function on/against that second click located within the calendar box?

There may be a very simple solution to this: simply fire the populate() method when #entrySrc changes.
$(document).on("change", "#entrySrc", populate);
or one of these alternatives:
$("#entrySrc").on("change", populate);
$("#entrySrc").change(populate);
note you're passing populate, not populate().

Based on the very poor documentation here: http://calendarxp.net/tutorials/flat/tutorials/PluginsSDK.htm I would guess you need to do the following:
Open your plugins.js file, which is apparently where to hook into a load of global functions (this control is sooooooo old).
Put your code into the fOnChange template (which I gather will be a nearly empty function):
///////////// Calendar Onchange Handler ////////////////////////////
// It's triggered whenever the calendar gets changed to y(ear),m(onth),d(ay)
// d = 0 means the calendar is about to switch to the month of (y,m);
// d > 0 means a specific date [y,m,d] is about to be selected.
// e is a reference to the triggering event object
// Return a true value will cancel the change action.
// NOTE: DO NOT define this handler unless you really need to use it.
////////////////////////////////////////////////////////////////////
function fOnChange(y,m,d,e) {
.... put your code here ....
return false; // return true to cancel the change.
}
What you put in there should be something of practical use. I would suggest generating a custom event like this:
function fOnChange(y,m,d,e) {
var $e = $(e.target); // (or e.originalTarget or whatever you can find with a debugger!)
$e.trigger("calchange");
return false; // return true to cancel the change.
}
This will require that jQuery is included before their js file.
In your code, listen for it like this for all calendars:
$(document).on('calchange', populate);

JQuery Datepicker works on dynamic input, but not original input

I am just learning javascript and html, so I hope this isn't an easy question. I have found solutions to many of my questions on this site (thanks to the community) but this one is stumping me.
I am trying to create a dynamic table where it adds elements when the last element has been filled. There are two components to each element: the date, and a particular code. You click on the data cell to reveal the inputs, then when you hit enter or click away it hides the inputs. My problem is with JQuery's datepicker. See this fiddle:
http://jsfiddle.net/VEL7d/
Problem: The datepicker does not work properly for the original data cell. The first time you click on the date input, the datepicker shows up but does not disappear when you select a date. Then, the second time you try to select the date input for the first data cell the datepicker does not show up at all.
The datepicker works fine for all dynamically generated content, i.e. all data cells generated using javascript are fine. Interestingly, I am even able to grab the date from the input box that the datepicker was linked to, even though the second time you click on the date it shows the original "Date" string.
Things I have tried:
Looking on stackoverflow. I see a number of people have had issues with it before, and I have learned a lot. However, I have not come across this issue before. It seems most people have the problem of attaching the datepicker to dynamically created content, but I do not have that issue.
I've tried moving the .datepicker around to different areas, including an onload section, but it doesn't change anything. I know it is a little redundant to have the .datepicker function called where it is, but that is really just where it ended up as I am typing up this question.
I am sure there are other issues with my code, but I am sure I can figure them out. This datepicker issue related to the first data cell is just really stumping me. Any help is appreciated.
I was hoping not to have to post the code, since there is a lot and I am not sure where the problem might be. Here is the HTML:
<section id="chartData">
<table id="cycle_1">
<tr id="row1">
<td class="dataEntry" id="cycle_1_day_1" cycle="1" cycleDay="1" colRef="gray" colDef="true">
<span id="cycle_1_day_1_dateText" class="dateText">Date</span>
<input id="cycle_1_day_1_dateInput" type="text" style="display: none;" class="dateInput" value="Date">
<span id="cycle_1_day_1_codeText" class="codeText">New</span>
<textarea style="display:none;" class="codeInput" id="cycle_1_day_1_codeInput">New</textarea>
</td>
</tr>
</table>
</section>
Here is the javascript:
<script>
$("#chartData").on("click",".dataEntry",function()
{
var ID=$(this).attr('id');
document.getElementById(ID+"_codeInput").innerHTML = document.getElementById(ID+"_codeText").innerHTML
$("#"+ID+"_codeText").hide();
$("#"+ID+"_codeInput").show();
$("#"+ID+"_dateText").hide();
$("#"+ID+"_dateInput").show();
$("#"+ID+"_dateInput").datepicker();
});
$("#chartData").on("change",".dataEntry",function()
{
//Set the data block to the value of the input box when the input box loses focus
var ID=$(this).attr('id');
var codeInputData=$("#"+ID+"_codeInput").val();
var dateInputData=$("#"+ID+"_dateInput").val();
document.getElementById(ID+"_codeText").innerHTML=codeInputData;
document.getElementById(ID+"_dateText").innerHTML=dateInputData;
if ($("#"+ID).is(":last-child"))
{
//Get the cycle number and day for the selected data cell
var currentCycle = parseInt($(this).attr("cycle"),10);
var currentDay = parseInt($(this).attr("cycleDay"),10);
currentDay = currentDay+1;
//Set up new dateText box
var dateTextNode = document.createElement("span");
dateTextNode.setAttribute("class","dateText");
dateTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateText");
//Set up new dateInput box
var dateInputNode = document.createElement("input");
dateInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateInput");
dateInputNode.setAttribute("type","text");
dateInputNode.setAttribute("style","display:none;");
dateInputNode.setAttribute("class","dateInput");
dateInputNode.setAttribute("value","Date")
//Set up new codeText box
var codeTextNode = document.createElement("span");
codeTextNode.setAttribute("class","codeText");
codeTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeText");
//Set up the new codeInput box
var codeInputNode = document.createElement("textarea");
codeInputNode.setAttribute("style","display:none;");
codeInputNode.setAttribute("class","codeInput");
codeInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeInput");
//Create the new data cell
var node=document.createElement("td");
node.setAttribute("class","dataEntry");
node.setAttribute("id","cycle_"+currentCycle.toString()+"_day_"+currentDay.toString());
node.setAttribute("cycle",currentCycle.toString());
node.setAttribute("cycleDay",currentDay.toString());
node.appendChild(dateTextNode);
node.appendChild(dateInputNode);
node.appendChild(codeTextNode);
node.appendChild(codeInputNode);
document.getElementById(ID).parentNode.appendChild(node);
document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeText").innerHTML="New";
document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_codeInput").innerHTML="New";
document.getElementById("cycle_"+currentCycle.toString()+"_day_"+currentDay.toString()+"_dateText").innerHTML="Date";
if ($("#"+ID).parent().parent().is(":last-child"))
{
document.getElementById(ID).parentNode.parentNode.parentNode.innerHTML += "<br>";
//Create new table
currentCycle = currentCycle+1;
var tableNode = document.createElement("table");
tableNode.setAttribute("id","cycle_"+currentCycle.toString());
//Modify the codeTextNode from above for the new table
dateTextNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1_codeText");
//Modify the codeInputNode from above for the new table
codeInputNode.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1_codeInput");
//Create a new data node for the new table
var node=document.createElement("td");
node.setAttribute("class","dataEntry");
node.setAttribute("cycle",currentCycle.toString());
node.setAttribute("cycleDay","1");
node.setAttribute("id","cycle_"+currentCycle.toString()+"_day_1");
node.appendChild(codeInputNode);
node.appendChild(codeTextNode);
//Create the new table
trNode.appendChild(node);
tableNode.appendChild(trNode);
document.getElementById(ID).parentNode.parentNode.parentNode.appendChild(tableNode);
document.getElementById("cycle_"+currentCycle.toString()+"_day_1_codeText").innerHTML="New";
document.getElementById("cycle_"+currentCycle.toString()+"_day_1_codeInput").innerHTML="New";
}
}
});
// Edit input box click action and enter key
$("#chartData").on({
mouseup: function()
{
return false;
},
keypress: function(e)
{
if (e.keyCode == 13) {
$(".codeInput").hide();
$(".codeText").show();
$(".dateInput").hide();
$(".dateText").show();
$(this).blur();
}
}
},".dateInput, .codeInput");
// Outside click action
$(document).on("mouseup", function()
{
$(".codeInput").hide();
$(".codeText").show();
$(".dateInput").hide();
$(".dateText").show();
$(this).blur();
});
</script>

mootools datepicker set value from other datepicker

I have a mootools datepicker (Arian / monkeyphysics) with 2 date input fields.
I want to set the date of the 2nd field one day after the first one.
So far I have:
window.addEvent("domready", function(e){
new DatePicker('#arrival_date', { positionOffset: { x: -3, y: 5 }});
new DatePicker('#departure_date', { positionOffset: { x: -3, y: 5 },onShow: function(){test();}
});
function test(){
firstvalue = Date.parse($('arrival_date').value);
newvalue = firstvalue.increment(); //ad 1 day to first input date
console.log(newvalue); // Logs ok:Fri Jan 16 1970 22:24:11 ...
$('arrival_date').set('value', newvalue ); //doesn't work
$$('#departure_date').attach('#arrival_date'); //doesn't work
$$('#departure_date').select(newvalue ); //doesn't work
}
How to do? (set the date of the 2nd field one day after the first one.)

That version of DatePicker uses hided inputs. So what you see is not what your input has as value, it has a unix datestamp.
If you noticed the Date.parse($('arrival_date').value); was in the 70's, that's because javascript uses miliseconds and unix time is in seconds. To get the "real" day from the $('arrival_date').value you need to multiply by 1000. But you actually dont need that.
To make the second DatePicker get the day from the first you can use this:
onSelect: function (){
var depDate = $('departure_date');
if (depDate.value == ""){
depDate.value = $('arrival_date').value + 86400;
}
}
This will add one day to the first datepicker date if the second is empty. The thing is that you will not see the change until the you open the datepicker, so if you change the value programatically the user will not see. Which means that without the if, in case the user changes the first input again, you loose the second date and user doesn't notice, leading to frustration/bugs.

Enable Datepicker only when first field has a value

Right now, the End Date selection is disabled. I want to only enable this when a Start Date is selected.
if( $('#datepicker1').val().length === 0) {
$('#datepicker2').datepicker("disable");
} else {
$('#datepicker2').datepicker("enable");
}
This clearly does not work. If I insert value = 'random date' into my first input field, it works fine. I'm not too sure on how do this. Clearly not as easy as I had hoped.
My other problem, or hope, is to disable the dates including and before the first selection.
You know, pick Start Date, and every date before and said date for the next picker would be disabled. But that is a whole other problem.

You can use something like this:
var end = $('#end').datepicker();
// Defining a function, because we're binding this to two different events
function enableEnd() {
end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
.datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}
$('#start').datepicker({
onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user
It's not really a good idea to enable the datepicker in the second field only after the first has been filled in, because the user can still add things into the second field manually, and you lose the format validation usually offered by jQuery UI datepicker. Instead, we disable the second input element directly.
See it working here: http://www.jsfiddle.net/yijiang/KwhLw/
Also note that we're using the input event here, because although it has less broad compatibility, is better than the usual methods used for keyboard event capturing. See a full discussion on this here: http://whattheheadsaid.com/tag/oninput

Just try this approach -
$('#datepicker1').datepicker({
//your other configurations.
onSelect: function(){
//enable datepicker 2 over here.
}
});

I would use the getDate method and see if it's null (nothing selected/entered), like this:
if($('#datepicker1').datepicker("getDate") === null)
For the other issue, check out the date range demo for the datepicker, it has a start/end date like you're aiming for.

Well, question is answered. For those who want to know what I have, here it is.
To change a Start Date and an End Date (A date range if you will) into an array of individual dates, I used this:
function createDateRangeArray($strDateFrom,$strDateTo) //Changes a Range of Dates to Specific Dates
{
static $aryRange = array(); //Creates an Array
$iDateFrom = mktime(1,0,0,substr($strDateFrom,5,2), substr($strDateFrom,8,2),substr($strDateFrom,0,4));
$iDateTo = mktime(1,0,0,substr($strDateTo,5,2), substr($strDateTo,8,2),substr($strDateTo,0,4));
if ($iDateTo >= $iDateFrom)
{
array_push($aryRange,date('Y-m-d',$iDateFrom)); // first entry
while ($iDateFrom<$iDateTo)
{
$iDateFrom += 86400; // add 24 hours
array_push($aryRange,date('Y-m-d',$iDateFrom));
}
}
return $aryRange; //Returns to step 1 and adds another value into the array
}
To get every date from my SQL Database and push them into a single array, this was used:
$query = "SELECT startdate, enddate FROM classdetails";
$results = mysql_query($query);
while ($arrays = mysql_fetch_array($results))
{
$aryDates = createDateRangeArray($arrays['startdate'],$arrays['enddate']);
echo "<br />";
}
So now I have managed to get every date range from an entire list of classes and made one huge array.
Now I had to use this array to actually disable the dates. Using the functions of which Yi Jiang has no generously wrote (thank you to everyone who helped me), the next step is:
$(function()
{
//To enable End Date picker only when Start Date has been chosen (And to disable all dates prior of said date)
var end = $('#enddate').datepicker( {numberOfMonths: 3, beforeShowDay: checkAvailability,});
// Defining a function, because we're binding this to two different events
function enableEnd() {
end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
.datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}
//End of function
// Datepicker
$('#startdate').datepicker({
numberOfMonths: 3,
beforeShowDay: checkAvailability,
onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() {$(this).toggleClass('ui-state-hover');}
);
});
//End of Function
//Disabling all dates where selected room and speaker is unavailable
var $myBadDates = new Array (<?php foreach($aryDates as $disabledate) { echo " \"$disabledate\","; } echo " 1"; ?>); //Creates the array (The echo " 1"; is merely to close the array and will not affect the outcome
function checkAvailability(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
//End of function
The only thing in my body right now, for testing purposes, are:
<!-- Datepicker -->
<h2 class="header">Datepicker</h2>
<span>
Start Date: <input type="text" id="startdate" />
</span>
<span>
End Date: <input type="text" id="enddate" disabled="disabled" />
</span>
It's long, yes, but it works. Thank you to everyone who helped me get this working.
The edit was me changing a function to a JQuery function that exists (of which for some reason I did not use in the first place); toggleClass. Thanks for picking that out.