I am new to the javascript/aspx world and most of my programming was done through trial and error and lots of internet searching, but i've hit upon a problem i cannot find a solution for.
I have a popup page that has 2 input boxes, and i have managed to add default values to both of these input boxes, for dates, like so:
$(window).load(function () {
var now = new Date();
var month = (now.getMonth() + 1);
var day = now.getDate();
if (month < 10)
month = "0" + month;
if (day < 10)
day = "0" + day;
$('#FNewDate').val('01/' + month + '/' + now.getFullYear());
$('#TNewDate').val(day + '/' + month + '/' + now.getFullYear());
}
now, if the user has entered a new date and hits the submit button, the page posts and reloads with the calculated results displayed to the user AND THE DEFAULT VALUES again, but not with the new dates the user has entered, and i need it to stay with the entered information.
I have tried playing around with static members but i have not been able to get it to work.
Here is the button action:
<asp:Button ID = "Calculate" runat = "server"
style="width:40% ; font:15px arial" Text = "Calculate" onclick="Calculate_Click" />
any help on the above would be appreciated, and pls include code in your replies...
Thnks
You should change your default value setters to add
if ($('#FNewDate').val().length() != 0)
To only set the value in case the value coming from server is empty.
Then in your input
<input type="text" id="FNewDate" value="<%=someObject.getSomeDate()%>"/>
Related
I have the following html code to only accept date greater than or equal to the current date in vanilla javascript. However for some reason it does not seem to accept the minDate value in the <script> tag of the html file.
<body>
<form>
<td><label for="Ride_Start_Date">Ride Start Date</label></td>
<td><input type = "date" id="Ride_Start_Date" name="Ride_Start_Date"></td>
<td><button type="submit" class="submit">Submit Query</button></td>
</form>
<script>
var todayDate = new Date();
var month = todayDate.getMonth();
var year = todayDate.getUTCFullYear() - 0;
var tdate = todayDate.getDate();
if(month < 10){
month = "0" + month
}
if(tdate < 10){
tdate = "0" + tdate;
}
var minDate = year + "-" + month + "-" + tdate;
document.getElementById("Ride_Start_Date").setAttribute('min',minDate);
console.log(maxDate);
alert(" minDate="+minDate);
</script>
</body>
this does not work and doesn't limits the date input,
However when I use a hardcoded string while leaving everything else the same such as: document.getElementById("Ride_Start_Date").setAttribute('min',"2022-05-31");
this works perfectly.
I've tried looking at many answers but they all seem to work perfectly with a variable value for the setAttribute but mine does not.
What do I seem to be doing wrong here?
Would appreciate any and all assistance in this
You should use
var month = todayDate.getMonth() //getMonth from 0 to 11
Today is 2022-05-31.
You are trying to set 2022-04-31 as the minimum date.
This is the wrong date. That's why it doesn't work
To achieve greater performance with our Shopify store, we decided to minimize use of jQuery across the site. In cartpage, I added a pure JavaScript datepicker that sometimes displays the calendar just once and never afterwards. I ensured only one version of jQuery loads in the theme, thinking multiple instances from other Shopify apps might be causing this issue. But even with a single jQuery instance being loaded now in the theme, the issue still persists. I don't see any console errors. Please add a product to the cart and go to the cart page to see this issue by clicking the date picker. Below is the link to the preview theme.
Following is the datepicker code for pickaday plugin.
<div class="cart-attribute__field">
<p>
<label for="ship_date">Ordering early? Pick a future ship date here:</label>
<input id="ship_date" type="text" name="attributes[ship_date]" value="{{ cart.attributes.ship_date }}" />
</p>
</div>
<p class="shipping-text">If you are placing an order with <b>a future ship date</b> that <u>also</u> includes multiple addresses please email support#packedwithpurpose.gifts upon placing your order to confirm your preferred ship date.</p>
<!-- Added 11162020 -->
<p class="shipping-text">Please note that specifying a date above ensures your gift is packaged and shipped on that date. <b>This is not a delivery date.</b> As we work with third party shipping agencies, your delivery date is subject to the specific carrier selected as well as your shipping destination. Please find our estimated shipping transit times for all regions of the US <strong>here</strong>.</p>
<script type="text/javascript">
(function() {
var disabledDays = ["2022-12-23","2022-12-24","2022-12-25","2022-12-30","2022-12-31","2023-1-1"];
var minDate = new Date();
var maxDate = new Date();
maxDate.setDate((maxDate.getDate()) + 60);
minDaysToShip = 2; // Default minimum days
if (minDate.getDay() == 5) {
// Friday. Set min day to Tuesday. 4 days from now.
minDaysToShip = 4;
} else if (minDate.getDay() == 6) {
// Saturday. Set min day to Tuesday. 3 days from now.
minDaysToShip = 3;
}
minDate.setDate(minDate.getDate() + minDaysToShip);
var picker = new Pikaday(
{
field: document.getElementById('ship_date'),
format: 'MM/DD/YYYY',
disableWeekends: 'true',
toString(date, format) {
// you should do formatting based on the passed format,
// but we will just return 'D/M/YYYY' for simplicity
const day = ("0" + date.getDate()).slice(-2);
// Get two digit month ("0" + (this.getMonth() + 1)).slice(-2)
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const year = date.getFullYear();
return `${month}/${day}/${year}`;
},
parse(dateString, format) {
// dateString is the result of `toString` method
const parts = dateString.split('/');
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1;
const year = parseInt(parts[2], 10);
return new Date(year, month, day);
},
firstDay: 0,
minDate: minDate,
maxDate: maxDate,
disableDayFn: function(inputDate) {
// Disable national holidays
var formattedDate = inputDate.getFullYear() + '-' + (inputDate.getMonth() + 1) + '-' + inputDate.getDate();
return ((disabledDays.indexOf(formattedDate) == -1) ? false : true);
}
});
})();
</script>
This was fixed by replacing (function() with window.addEventListener("load", function()
So I only want to have one selected date on my calendar UI, however when I press a new date, the old one is still lit up, and so I can press all the days on my calendar and they'll all light up.
for(var dayCounter = 1; dayCounter <= currMonthDays; dayCounter++){
tempListItem = document.createElement("li");
tempListItem.innerHTML = dayCounter;
$(tempListItem).addClass("day");
//add a hidden element to the day that we can access when we click on it
var temp = months[currMonth] +"/" + dayCounter +"/" + currFullYear;
$(tempListItem).append("<div class = 'hidden'>" + temp + "</div>");
if(dayCounter == date.getDate() && currMonth == date.getMonth()){
tempListItem.setAttribute("id", "current-day");
}
ulDays.appendChild(tempListItem);
}
$(document).on("click", ".day", function()
{
var date = $(this).children(".hidden").text();
console.log(date);
$(document.getElementById("current-day")).removeAttr("#current-day");
$(this).attr("id", "current-day");
});
After removing the current-day class, shouldn't the element lose its CSS?
It looks like you have a small big when you try to remove the id from the current-day. removeAttr expects the name of an attribute. In this case, that attribute would be id, so try this:
$(document.getElementById("current-day")).removeAttr("id");
The following code is supposed to display a confirmation box. if the user clicks the ok button, the current time is supposed to be displayed. But for some reason when I test the button by clicking on it nothing happens. I need a fresh pair of eyes to tell me what I'm missing as to why this code isn't working. Thank you for your help:
<script>
function confirmationDemo() {
var ok = confirm("Click OK to show the time, \n or click Cancel to close this window \n
without doing anything.");
var now = new Date();
var hour;
var minute;
if (now.getHours() < 12) {
hour = now.getHours();
} else {
hour = now.getHours() - 12;
}
if (now.getMinutes() < 10) {
minute = "0" + now.getMinutes();
} else {
minute = now.getMinutes();
}
if (ok == true && now.getHours() < 12) {
document.getElementById("confirmationDemoReturn").innerHTML = "The time is: " + hour +
":" + minute + " am.";
} else {
document.getElementById("confirmationDemoReturn").innerHTML = "The time is: " + hour +
":" + minute + " pm.";
}
}
</script>
Try it: <input type="button" value = "Confirmation Box" onClick =
"confirmationDemo();">
<p id="confirmationDemoReturn"></p>
The problem seems to be too simple, the text within the confirmation is not properly concatenated. Hence it was not working.
var ok = confirm("Click OK to show the time, \n or click Cancel to close this window \n
//--- an enter key is pressed
without doing anything.");
I have tested in fiddle
First of all, you should not set events in HTML but in JS. HTML is there for structure, not for interaction. However, if you want to use this method, you have to add the following meta tag in the header of you document:
<meta http-equiv="Content-Script-Type" content="text/javascript">
However, I recommend adding the event in JavaScript like this:
var button = document.getElementById('btn');
button.onclick = confirmationDemo;
Of course after setting an id for your input:
<p id="confirmationDemoReturn"></p>
Check out this Fiddle: http://jsfiddle.net/R5t6z/
I am using the JavaScript-based popup calendar from dynamic drive named
"Xin's Popup Calendar" and it works perfectly. But, I want to be able to
adjust the date of a 2nd textbox based on the selection.
For example, I want to be able to automatically adjust it to +1 month of
whatever date was selected in the popup. How can I do that?
Here is an example:
<input type="text" name="firstinput" size=20>
<small>Select Date</small>
<p>
<input type="text" name="secondinput" size=20>
<small>Select Date</small>
</p>
If the firstinput date is 3/21/10, I want the secondinput to change to 4/21/10 at the same time.
There are two parts to this: (1) a function to add a month to a data and (2) the change event handler to the textbox. This solution is very specific to the Xin Pop Up Calendar.
function addMonth(d,month){
t = new Date (d);
t.setMonth(d.getMonth()+ month) ;
if (t.getDate() < d.getDate())
{
t.setDate(0);
}
return t;
}
$("input[name='firstinput']").change(function(){
var dt = $(this).val();
var yr = dt.substring(0,4);
var mo = dt.substring(5,7);
var dy = dt.substring(8,10);
var firstDate=new Date();
firstDate.setFullYear(yr,mo-1,dy);
var secondDate = addMonth(firstDate,1);
$("input[name='firstinput']").val(secondDate.getFullYear() + "/" + secondDate.getDate() + "/" + secondDate.getMonth()+1);
});