Javascript datepicker popup? - javascript

I'm looking for a javascript datepicker like this one : http://code.google.com/p/mobiscroll/
but I want it to respect a maximum date (like the one mentionned in the "max" attribute of my date input on the web page). I don't care if I have to set that as an option but I want it to respect a certain date.
Any idea? Thanks!

Starting from 2.0 mobiscroll has this functionality. It also works with input type="date" min/max values.

jQuery and jQuery UI offer this kind of functionnality, but they do not offer this layout.

In most browsers nowadays you can just use:
<input name="mydate" type="date" max="2012-01-01"/>
It should default to the default date picker of the device you are using.

Related

enable specific dates in datepicker (javascript)

I have a simple datepicker
<input type="date">
How to enable only some given specific dates on this datepicker
array = [{"date":"06-April-2021"},{"date":"11-April-2021"},{"date":"17-April-2021"}]
There were some solutions with jquery but how to achieve this through javascript
HTML datepicker supports only min/max attribute. You might want to consider other date picker controls such as bootstrap

From html input="date" to html select drop down format

Is it possible to convert html tag/format <input type="date"> to html tag/format <select><option></option></select> ?
I just wanted to make an input type date to a select drop down format.
For example:
From
Date of Birth - input type date
To
Date of Birth - select drop down option
Actually, I don't want to separate the date of birth values into three. But instead, make a better solution wherein I can transform the input date into a select drop down one.
Anyone who can help me with this one? Thank you.
You may use jQuery plugin to showcase a datepicker like the one below:
https://plugins.jquery.com/datetimepicker/
You can easily find many other jQuery plugins for the same.
If you wish to play around with its UI, you may use jQuery UI built-in themes or write some CSS on your own.
Depending on the browser to open dialog. and also input type=date not support in every browser.

Datepicker for Bootstrap (select Week only and making it work in IE)

I'm using this date picker:
http://www.eyecon.ro/bootstrap-datepicker/
2 questions:
Anyone know how to make it work in Internet Explorer? It just
doesn't, try it.
How can I configure it such that it selects entire
weeks? (if a person selects a specific day in the week, the value
passed is the start of the week, it would also be good if it
highlights the entire week on hover)
You can try https://github.com/eternicode/bootstrap-datepicker which is an improved version of datepicker by eyecon.
You might also consider using HTML5's builtin datepicker by simply using
<input type="date">

jQuery DatePicker & DateTimePicker

I have faced a little problem while trying to use this two jquery plugins. Hope someone can help me out with this.
The first plugin (DatePicker) I have used is the default one that comes with the jqueryui.
The second plugin (DateTimePicker) is the DateTimePicker from http://trentrichardson.com/examples/timepicker/
What I am trying to achieve is to have a user-defined date range like the sample provided in the jqueryui, with two textboxes (specify start date and end date) http://jqueryui.com/demos/datepicker/date-range.html
While having another datetimepicker to allow user to select a datetime within the date specified above.
Here's a sample: http://jsfiddle.net/uyB52/1/
However, the issue here is that whenever I try to add in the datetimepicker javascript, the datepicker will not function properly. It will not be able to set the minimum date range as what it is suppose to be.
Have anyone encountered the same issue before? Can some one please advice me? I am still new to programming. Thanks in advance!
It looks like your datetimepicker plugin interferes with jQuery UI (although it is supposed to be a working jQuery UI plugin). There may are possibilities to fix this issue, but I would recommend to use no or another plugin for picking the time (which works).
If you want to use a datetimepicker, you will have to search for different plugins and find out which one fits your needs best. I can not really recommend a plugin because it depends on your requirements.
But you could also go without a datetimepicker plugin and only use jQuery UI instead? Have a look at this fiddle: http://jsfiddle.net/uyB52/7/
The idea is to use jQuery UI's datepicker for picking dates, and use dropdown boxes for choosing the time. You could also let the user input the time in an input field and validate it. Or, instead of dropdown boxes, use the jQuery UI slider.
Got it. You should convert string into Date as minDate and maxDate options take Date object.
$("#from").datepicker("option", "maxDate", new Date(selected_date))
jsfiddle

How to add validation/restrictions for HTML5 date field without jquery/javascript

Is it possible to add validations/restrictions to date element using HTML api,without jquery?
I am currently using jquery datePicker to display calendar,and for adding restrictions using the beforeShow method of the datePicker.
Now i am trying to use the HTML5 calender and want to know how to add restrictions(eg:disable weendends/holidays) to the HTML5 calendar.
Can somebody point me in right direction?
You can use min and max attributes on your date input.
Spec : http://www.w3.org/TR/html-markup/input.date.html
Edit :
Afaik, there is no way to disable specific days using HTML5 date input...
If you want to be cross-browser, use Modernizr and provide a fallback for old browsers (for example jQuery datePicker) : http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

Categories