Develop Reference

Kendo Js: Show previous dates which are disabled

I am facing an issue using Kendo Js Date Time Picker.
The situation is: "I have a date time picker which can only allow dates from current time onwards. Those pages have already been saved, when I am trying to show the date, the dates aren't showing though it became a back date.
My concern is: The input should show the date which has already been saved(Whether that is past or present), but it shouldn't allow user to select back date.
The code are below.
<input id="datetimepicker" />
let options = { //Setting options for the datepicker
value: new Date(),
dateInput: true,
disableDates: function (date) {
if (date <= new Date()) {
return true;
} else {
return false;
}
},
};
$("#datetimepicker").kendoDateTimePicker(options);
const priorValue = new Date("8/31/2022 2:18 PM"); // Let Already selected date
let selector = "#datetimepicker";
let datetimepicker = $(selector).data("kendoDateTimePicker");
datetimepicker.value(priorValue);
datetimepicker.trigger("change");
function roundToNearest30(date) { //Function to round minutes to nearest 30 minute.
date = new Date(date);
const minutes = 30;
const ms = 1000 * 60 * minutes;
return new Date(Math.round(date.getTime() / ms) * ms);
}
For your reference a sample dojo
I need to show the selected date which is disabled.

You can use the disableDates configuration to disable prior dates and the month.content configuration to define how the dates will be rendered and show/hide dates conditionally:
<script id="cell-template" type="text/x-kendo-template">
<span class="#= (data.date <= new Date() && !isInArray(data.date, data.dates)) ? 'hidden' : 'visible' #">#= data.value #</span>
</script>
Here is a sample dojo.

Broken Delivery Estimate Calculator

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);
}
});

Date Picker Input

How can I validate my HTML date input so only certain dates of the week can be selected? I've seen this before on some booking websites. A date-picker calendar appears and days that the event is unavailable are grey out and cannot be selected.
I'm not sure where to start and I want to do this as my current project requires date input validation. The event is only available 3 days a week so it wouldn't make sense for the client to select a date when there is no event on.
Example, days are Monday, Wednesday and Friday so picking the Thursday 30th Nov shouldn't be an option.
With the first-line question in mind, what would be the simplest programming language to create a date-picker on to go with a data driven website?

If you are using jquery date picker:
<script>
var disableDates = ["22-11-2017", "23-11-2017"];
function disable(date) {
// convert it to my formate
dateToCheck = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if ($.inArray(dateToCheck , disableDates) == -1) {
return [true, ""];
} else {
return [false, "", "disabled"];
}
}
$(function() {
$("#eventDate").datepicker({
dateFormat: 'dd-MM-yy',
beforeShowDay: disable
});
});
</script>

jquery.countdown.js showing wrong date

Following is the code i am using on jquery countdown but it is calculating wrong date.i need to set it to 1st feb 2015 , tried setting the month to 01 (month starts from zero) but in this case counter disappers
<script>
$('#clock').countdown('2015/02/01').on('update.countdown', function(event) {
var $this = $(this).html(event.strftime(''
+ '<ul class="co"><li><span>%-d</span><br>Days </li>'
+ '<li><span>%H</span><br> Hours </li>'
+ '<li><span>%M</span><br> Minutes </li>'
+ '<li><span>%S</span><br> Seconds</li></ul>'));
});
</script>

Assuming you are trying to create a countdown until February 1st, 2015 you should use the following code:
$('#clock').countdown({until: new Date(2015, 12-11, 1)}))

Javascript checking date

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..