Need Date/Time Picker with specific functions - javascript

I've looked around, and I do see previous questions where people ask about Date/Time pickers; unfortunately none of those threads matched my specific needs. I see a lot of people recommending Any+Time as well, but it seems a little "heavy" and I'm looking for lightweight.
Basically, I have the need for a date/time picker for "events". The event-search picker here (http://jqueryui.com/demos/datepicker/#event-search) is very nice, but it doesn't handle time. My form is built on jQuery, so I'm okay with using that.
Must be able to select both date and time
End time form should be hidden until the start time is selected.
After the start time is selected, end time should automatically be set for 6 hours later
Should not be able to select an end time that takes place before the start time
Should be able to handle timezones, and default to the user's current timezone
Should be able to send out a UTC timestamp (I will store in a hidden field; ex: 1291004863)
Your recommendations are appreciated... I dont know much about Javascript.

I would try extending the jQuery UI datepicker with the modifications made on the following page:
http://addyosmani.com/blog/the-missing-date-time-selector-for-jquery-ui/
The jQuery UI event search example code would only need the new parameters added as to make it work.
Hope that helps!
Edit:
Example code for datepicker range (using code from link above):
-HTML-
<p>
<label for="from">From:</label> <input class="datetime" type="text" name="from" id="from" value="" />
<label for="to">To:</label> <input class="datetime" type="text" name="to" id="to" value="" />
</p>
-js-
$(function() {
$('.datetime').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
Here's a link to see in action:
http://bit.ly/hZTR84

Related

Disable Previous Dates in Datepicker with Javascript

I Am Kinda New in Javascript and I want to Disable Previous Dates from Today
I used this code to display Datepicker
<input type="text" onfocus="(this.type='date')" id="leaveTo" name="leaveTo" placeholder="DD-MM-YYYY" style="width:fit-content;">
If I got your question right, you need to make some dates to be unselectable.
That can be done by using max, min attributes.
For more information take a look: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Additional_attributes
<input type="date" min="2020-12-23">

How to give specific range to datetime-local input type?

Working on Phonegap application, it requires to provide specific date range (for example, User should be able to pick only future dates up to 10 days from now).
Testing application into iPad. I have tried with min and max attributes but not working.
<span class="field_text">Preferred Date & Time</span>
<input id="checkout_datetime" type="datetime-local" class="text_box_cnt" required="required"/>
Please help...
This is an old question, but it's the first result that came up for me when Googling, so I wanted to leave a proper answer.
The min and max attributes are indeed the ones to use to restrict input to a given range:
<input type="datetime-local" id="meeting-time"
name="meeting-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2018-06-14T00:00">
Use date instead of datetime-local.Here is an example
<input id="checkout_datetime" type="date" min="2014-03-20" max="2014-03-30" class="text_box_cnt" />
Reference by http://www.w3.org/TR/html-markup/input.date.html

Adding 2 separate scrollers in mobiscroll

I'm trying to add separate scrollers for date and time pickers with mobiscroll but for some reason i can only get the first scroller to work.
HTML:
<div id="set_call_div">
<label>
<span>Date:</span>
<input id="date_scroller" name="date">
</label>
<br>
<label>
<span>Time:</span>
<input id="time_scroller" name="time">
</label>
</div>
JS:
$(document).ready(function() {
$("#date_scroller").mobiscroll().date();
$("#time_scroller").mobiscroll().time();
});
The first one responds and opens, The second one doesn't respond at all.
Any ideas?
That is exactly how it is supposed to be initialized, and it should be working...
Check the console for JS errors.
Try a simple page holding just the two textboxes and minimal scripts for init

javascript class not working when written to div using getElementById

I have been using a datepicker js class known as tcal. After you link to the class on your server, you can call it with one line of code.
in header
<link rel="stylesheet" type="text/css" href="tcal.css" />
<script type="text/javascript" src="tcal.js"></script>
html
Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>
It has been working fine.
However, to streamline a page, I am now trying to take it out of the html and display it in a div only when a user clicks on it using getElementById. while I can display the input box ok, when written to the browser this way, the class no longer seems to work.
js
function pickDate() {
document.getElementById('show').innerHTML = 'Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>';
}
html
Pick Date<div id="show"></div>
When user clicks, input box appears. However, datepicker calendar does not pop up when you click in tox. Does anyone know why tcal is not working when written to browser this way?
Thanks for any suggestions.
the reason for this happening is that you are adding input box in the dom later your datepicker code is initialized just reinitialize datepicker code
as i see your library may don't have a code to initialize is seperately you can do hide and show instead of adding into the dom later, if the text box will be available in the starting of page ready it will be initialized so use the following code
html -
<div id="something" style="display:none;">Pick date: <input type="text" size=8 name="eventdate" class="tcal" value=></div>
js -
document.getElementById('something').style.display="block";

Dojo DateTextBox selectable text

I have a Dojo DateTextBox that per requirement will also allow a time after the date.
<input type="text" name="date1" id="date1" value="" dojoType="dijit.form.DateTextBox" constraints="{datePattern:'dd MMM yyyy HHmm'}" required="false" />
This all works fine. What I want to know is by default dojo has text selection disabled. I can not highlight the text or put the cursor where I want it. It always displays at the end of the selection and you have to use the arrow keys to move the selection. Is there a way to make it so the datetextbox works like a text box with a calendar? Thanks
looks like a bug. please file a ticket at bugs.dojotoolkit.org and reference checkin [24131]

Categories

Resources