Is there a javascript datetimepicker that can selects 2 dates in a single input field. Like:
(Screenshot taken from google-analytics)
Currently we need to use 2 form input fields to select date range.
Is there any free datetimepicker that provides this functionality?
This is what you're looking for: https://github.com/dangrossman/bootstrap-daterangepicker
Related
Hi All Is there any way in google form to achieve the below scenarios.
1) I would like to set the restriction in date field (calendar) for selecting the date. ( I am using date field for selecting date of birth and i want to restrict the field to select between 18 to 30.)
2) I would like to add an other option for a drop down list that would allow the user to fill in his own choice that isn't on the list.
Kindly someone help.
I have two fields 1 is Simple Date picker and 2 is Custom Date picker and now i want to write a condition that if both the fields are used in one form then drop-down list was hide in Simple date picker field only.
i write this condition only for when i used only simple date picker fields in one form.
document.getElementById("ddldate").style.display = "none";
now, i want to write condition for both the fields that are used in one form.
this is the picture of normal date picker and i want to remove this drop-down list if i use both custom date and simple date.
I am not clearly understood your question but i think you want some like below, You can check element exist or not in document using below code and then make your condition accordingly.
var date1= document.getElementById('ddldate');
var date2= document.getElementById('ddldate2');
if (date1 && date2)
{
//do your stuff here i.e. hiding datepicker
// document.getElementById("ddldate").style.display = "none";
}
Note: change element id as you have given in your form
I would like to create a combo box for date selection in my web page.there should three box for day,month, year respectively and users just select from the given items.
You can try using HTML5 input type="date".
<input type="date">
I am using the datetime picker library and it works nicely.
But now, I am I need to save a time range. When I click to the widget, I am able to save a date and time in this format:
2015/03/15 10:15
This works well. But I would need to add a time range and save the date+time in this format:
2015/03/15 10:15 - 12:00
How to do that? I already changed the MySQL column from datetime to string. Now I am facing the problem how to enter the value to the input. When I chose the date+time, then in the input will occur something like this:
2015/03/15 10:15
Then I click to the input and want to manually add this text: - 12:00. But when I type this text to the input and the click out of the input, the - 12:00 text will disappear and in the input stays only following: 2015/03/15 10:15.
How to solve this problem? Any thoughts?
Thank you.
I think there might be a slight problem in your design.
Ideally, if you need a datetime range (somewhat simliar to what you have on airline and hotel booking sites), you ought to have 2 datetime pickers. One for the start of the range and one for the end of the range. Even with the database. There would be one column for start date and another for end date.
In your case, you need the time range, so you could probably add the time using the DateTime.AddMinutes()
I'm using jQuery UI's datepicker to display a calendar with select lists. Input field and select list are synchronized, so when you change value of either the datepicker or select list, the value of the other fields will change accordingly.
The datepicker is used with the Restrict date range functionality (http://jqueryui.com/datepicker/#min-max). That does its job perfectly - the END date can't be before the START date and you are unable to choose previous days accordingly. Of course, you can't choose that the START date is after the END date either.
The problem is with the select list. Even if "restrict date range" does its job, you still can select any date with the select lists. Therefore, I'm looking for this solution when you use the select lists (it shouldn't affect anything if you only use the calendar icon):
If you first select the START date, the END date should automatically change to one day after the selected date.
If you have both dates selected and decide to change the START date to the date that is after the END date, the END date should again change to one day later.
If you have both dates selected and decide to change the END date to the date that is before the START date, the START date should change to one day before the END date.
I have tried with using this piece of code to affect #1 and #2:
$('#start').change(function() {
var date2 = $('#start').datepicker('getDate', '+1d');
date2.setDate(date2.getDate()+1);
$('#end').datepicker('setDate', date2);
});
However, it doesn't seem to affect anything. Here is the whole example on jsFiddle:
http://jsfiddle.net/JW4jg/