How to make unavailable to click some dates in qooxdoo date widget? - javascript

Is it possible to make specific dates or a range of dates in qx.ui.form.DateField widget unavailable to click/interact with somehow?

This functionality was added by me to qooxdoo version 7.2.1. You can set minimal and maximal dates via special properties like MinValue and MaxValue.

Related

Disable dates using jQuery Datepicker

I understand that we can disable certain dates (Jquery UI datepicker. Disable array of Dates) by manually specifying each date in array however this seems like a messy solution to a problem.
Is there a simpler method of just providing a start and end date of a period in which dates should be disabled? i.e. 07/07/2020 to 07/08/2020 rather than specifying each date between these?

Jquery input mask to input date range

I am making a web app which should accept a specific interval that is added to the target date to check if the request is expired. So I need an input with formatting: months:days:hours
Where months is limited to 12, days to 31, and hours to 24. I tried to use jQuery inputmask plugin
I made like this:
https://jsfiddle.net/qahxvspb/2/
But it doesn't work for some reason, I put a mask like this:
mask: "mm-dd-hh"
But in the input I get weird stuff, there is still placeholder mm-dd-yyyy, and I only can input year into it.
So 2 questions:
How to make a correct mask?
How can I make allow zero month in the mask? So, basically, it would be optional for the range, if I want I would just put 0 into month, check that on server, and create a range only from days and hours.
Javascript Date makes my head hurt because of things like what you are trying to do
I use a library called moment,which is available as a cdn or npm package
It can create input patterns like the one you have, do arithmetic on dates and then convert to the time format you want, even Javascript Date

How can I disable only selected dates on html5 datepicker?

How can I disable few dates (Ex: one week) on a HTML datepicker? I have an input item like this
<input type="date" id="date01" name="date01" max="2019-12-30">
I know I can use min and max values to limit available time period, but in here, I want to block out some days in the middle. can I do that with plain html date picker? if so, how?
You can't: the HTML5 date input only accepts a lower and upper bound to indicate the allowed date range: you cannot specifically select certain dates that are disabled/non-selectable to the user.
There are two solutions to your approach:
Use a combination of client- and server-side validation to let the user know that certain dates are not allowed. This comes at the cost that the user does not know which dates are not allowed when the native date picker is shown in the browser.
Alternatively, you can use a third-party library that allows disabling of specific dates.

Date Range functionality for Datebox

I am using Datebox widget and want to limit the dates from which the user can choose.
eg. Only dates between 2013-Jan-02 and 2013-Jan-25 should be enabled, rest disabled.
How do I provide these values programatically ? Passing it in JSON is not working for me.
$('#dateInput').datebox({"mode": "calbox", 'min':"2013-01-02", 'max':"2013-01-25"});
Please let me know the syntax to pass the date range parameters.
I dont know whether it is possible in Datebox widget. But if you pick Jquery UI datepicker, it has this option.
Have a look at this if you are interested
http://jqueryui.com/datepicker/#min-max

javascript form validation for date & Time

I am writing a javascript to validate Date&time based on the two Dropdowns selected
Based on the dropdown change the validation has to be changed on Date&Time field
I am looking for the validation popup some thing like:
Entered Date&Time should be on or before 1 AM (Midnight) same day
I'm sure that a framework would help immensely (and I'm sure you'll get lot of suggestions to move to one) but if you're just looking for better Date handling you might want to look at my DP_DateExtensions component.
It'll allow you to very simply parse dates (create date objects from your drop-down field values using the Date.parseFormat() method) and then do date math and comparisons on them (in your case using date.compare() to compare the entered date to your target date).
You can then use the timeFormat() and dateFormat() methods to display date/times exactly as you want.
The component's old... but well seasoned and, at least to me, insanely useful.

Categories