I am trying to use JavaScript to validate that the date selected is not earlier than today, but when I select today's date it's showing the alert box.
JavaScript:
function checkDueDate(sender, args) {
var td = new Date();
td.setMinutes(59);
td.setSeconds(59);
td.setHours(23);
//to move back one day
td.setDate(td.getDate() - 1);
if (sender._selectedDate < td) {
alert("You can't select day from the past! " + td + "");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
ASP.NET:
<asp:TextBox ID="txtDueDate" runat="server"></asp:TextBox>
<asp:CalendarExtender ID="txtDueDate_CalendarExtender" runat="server"
TargetControlID="txtDueDate" OnClientDateSelectionChanged="checkDueDate">
</asp:CalendarExtender>
I think maybe you're complicating things too much. I would just subtract a day in miliseconds and it should work:
function isPast( date ) {
return date.getTime() < (new Date().getTime() - 864e5);
}
Demo: http://jsbin.com/igeyov/1/edit
the logic you have here seems to do exactly what you want - you have set the td variable which you evaluate against to the last possible second of todays date and you are checking if the selected date is before or equal to that. Todays date IS "before or equal to" 23:59:59 today...
Also, you have tagged this with c# , although it is all javascript and ASP.net as far as I can tell.
if you want to do select only future dates then you can try this code also....this is working with ajax calendar:
function checkDate(sender, args) {
if (sender._selectedDate < new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
Here is the HTML code:
<asp:TextBox ID="txtDOB" Width="180px" MaxLength="50" runat="server"></asp:TextBox>
<ajaxctrl:calendarextender onclientdateselectionchanged="checkDate" id="cale_txtDOB"
runat="server" targetcontrolid="txtDOB" format="MM/dd/yyyy" cssclass="cal_Theme1">
</ajaxctrl:calendarextender>
This code works only if you select past dates it will show a pop up " that you can not select past dates" whatever be it.
UPDATED CODE:
Here is code work if you dont want to include today's date also, you just want future dates only:
function checkDate(sender, args) {
if (sender._selectedDate <= new Date()) {
alert("You can select only future day!");
sender._selectedDate = new Date();
// set the date back to the current date
//sender._textbox.set_Value(sender._selectedDate.format(sender._format))
}
}
hope this will help you..
Related
I'm hoping someone can help me figure out how to code an app that allows you to select a mailing date with jquery datepicker, select Standard or First-class shipping from a dropdown, and calculate an estimated delivery date window (7-12 Days for Standard, 3-5 Days for First-class).
I had it working when the "Mailing in" [number] "Days" accepted a string input but then it broke when I added code for the datepicker.
I also need to keep weekends & holidays excluded from the shipping calculation.
Here's a link to the full pen: https://codepen.io/allyjfuller/pen/oNXvwJL
$('#calculateShippingEstimate').click(function( event ) {
//Prevent button from 'submitting' and reloading the page
event.preventDefault();
//Capture the mailing date
var $mailingDate = $("#mailingDate").val();
var $postageType = $("#postageType").val();
var $shipStateShippingDuration = eval('data.shipTimes.' + $postageType);
var $totalShippingTime = parseInt($mailingDate) + parseInt($shipStateShippingDuration);
//Create the date
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate() + parseInt($totalShippingTime);
var year = date.getFullYear();
<form>
<section>
<label>Mailing on</label>
<input id="mailingDate" placeholder="number"></input>
</section>
<section>
<label>Postage:</label>
<select id="postageType">
<option value="Standard">Standard</option>
<option value="FirstClass">First-Class</option>
</select>
</section>
<input class="button" id="calculateShippingEstimate" type="submit" value="Get Estimated Delivery Date"></input>
<div class="results"></div>
</form>
Looking through your code snippet it seems like you're trying to hand roll a lot of features that already exist within the JS Date framework.
Once you get the starting date and the number of days for shipping, you can add those days together to create a final shipping date. From there and within a loop, you may go day by day and check whether the current date index is a weekday or not (using Date.getDay()).
With that you may check for Saturday [6] and Sunday [0] and then add days needed on top of the final date.
I've included my version of the code below with some console debugging but have not added code holidays. Holidays may be checked for using an array or map. Get all the holiday dates for a year and then have the current index check the holiday array/map to see if there are any matches. If there are, add another day to the final date.
The function for addDays is pulled from here. It adds some explanation which I think you'll find helpful.
function addDays(date, days) {
const copy = new Date(Number(date))
copy.setDate(date.getDate() + days)
return copy
}
// FINAL SHIPPING ESTIMATE
$('#calculateShippingEstimate').click(function( event ) {
event.preventDefault();
let mailingDateVal = $("#mailingDate").val();
let shippingDuration = data.shipTimes[$("#postageType").val()];
let mailingDate = new Date(mailingDateVal);
console.log("final Date: " + addDays(mailingDate, shippingDuration));
let finalDate = addDays(mailingDate, shippingDuration)
let mailingDateIndex = new Date(mailingDate);
while(mailingDateIndex <= finalDate) {
console.log("current mailDateIndex: " + mailingDateIndex)
if (mailingDateIndex === finalDate) {
break;
}
// Weekend
console.log(mailingDateIndex.getDay());
if (mailingDateIndex.getDay() == 0 || mailingDateIndex.getDay() == 6) {
console.log("weekend day hit! Adding day to final...")
finalDate = addDays(finalDate, 1);
}
mailingDateIndex = addDays(mailingDateIndex, 1);
}
});
So I am using the calendar app on a page that has a set date. I have it so when you click on the calendar, whatever is in the input that has the date, gets changed to the date you clicked on.
When you load into the page I want whatever date that is in the input to be what the calendar is set to. Thanks.
LINK TO PLUGIN - https://www.jqueryscript.net/time-clock/Simple-jQuery-Calendar-Date-Picker-Plugin-DCalendar.html
var pageDate = "4/04/2018";
<input class="date">
$('.date').val(pageDate);
// Make above date the selected date
// Code below is for setting input to date you select. Currently works.
$('.box').dcalendarpicker({
format: 'mm-dd-yyyy'
}).on('datechanged', function(e) {
console.log('Date change');
var d = e.date;
selectedDate = moment(d, 'MM-DD-YYYY');
var theDate = selectedDate._i;
$('.date').val(theDate);
var weekdayLongform = selectedDate.format("dddd, MMMM");
var dateLongform = selectedDate.format(" D");
var yearLongform = selectedDate.format(" YYYY");
});
Just set the date as the value of the input (in the same format specified in the plugin initialization). That will do the trick.
<!-- value specifid as mm-dd-yyyy -->
<input class="date" value="03-11-2018">
I have this online reservation, and i have this problem, Is there a way i can highlight the unavailable days on the date picker?assuming i have inserted dates on the database. Here's my code for the date picker.
<input type="text" name="pick-up-date" id="pick-up-date" class="form-control datepicker" placeholder="mm-dd-yyyy">
Here's a screenshot:
Use beforeShowDay() function from jQuery check this
e.g., something like this,
var datesToDisable = ["2015-01-07","2015-17-07","2015-21-07"]; //you have to fetch the dates and put em in an array and wh7atever the format is.
$('#pick-up-date').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ datesToDisable.indexOf(string) == -1 ]
}
});
Should do the trick!
I have an javascript alert :
<script type="text/javascript">
function checkDate(sender, args) {
if (sender._selectedDate > new Date()) {
alert("You can't select date later than today");
sender._selectedDate = new Date();
// set the date back to the current date
sender._textbox.set_Value(null)
}
}
</script>
I want that text "You can't select date later than today" to set in 2 languages, to localize it in 2 languages.When I chose my application in English that alert should be in English and so on. How is it possible?
P.S that javascript i am using inside the asp.net form
I have a javascript function with does the following;
<dx:ASPxDateEdit ID="txd_DOM" runat="server" Height="16px" Theme="MetropolisBlue" ClientInstanceName ="txd_DOM">
<ClientSideEvents DateChanged="function(s, e) {
txt_Testing_Date.SetDate(txd_DOM.GetDate());
}"/>
</dx:ASPxDateEdit>
It Sets a datedit box to the same date as another date edit.
However I want it to set the date for txt_Testing_Date to 3 years ahead of the date in txd_DOM
I'm relatively new to this so any Help would be great!!
I'm not familiarized with the technology you are using but try this, please:
<dx:ASPxDateEdit ID="txd_DOM" runat="server" Height="16px" Theme="MetropolisBlue" ClientInstanceName ="txd_DOM">
<ClientSideEvents DateChanged="
function(s, e) {
var date = txd_DOM.GetDate();
var newDate = new Date(date.getFullYear() + 3, date.getMonth(), date.getDay());
txt_Testing_Date.SetDate(newDate.getDate());
}"/>
</dx:ASPxDateEdit>