Select date range in one calendar - javascript

I really like plugin daterangepicker, but it uses 2 calendars for selecting a date range.
Is it possible to select a date range with only 1 calendar? do you know other plugins?
I want to make something like that

You can refer the below link. It might help you.
http://www.daterangepicker.com/
<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>

You can use the singleDatePicker on the calendar configuration, and set it true.
singleDatePicker: true,
http://www.daterangepicker.com/#example3

Related

How can I adjust for timezone using javascript/jQuery in a jQuery date and time picker?

Query:
How can I adjust a user-specified date and time in their local timezone to either UTC or some other given timezone using jQuery, Javascript, or a plugin in either of the two?
Background:
I am using the bootstrap-datetimepicker plugin on an html form text field. Users may specify a date and time in the future (to schedule an event, namely a telephone call). They will specify the date and time in their own timezone, and will not be asked to specify the timezone (meaning that all they will see is a calendar and clock on which they will choose the desired date and time). I need to be able to adjust this time (and date if applicable) to either UTC or to some other time zone (specifically EST/EDT depending upon whether DST applies). The user must not be aware that this adjustment is being made. As such their timezone must be somehow detected. As I am using bootstrap-datetimepicker the moment.js plugin is available. I may include whatever javascript/jQuery plugin or libraries I see fit (pageload time is not a consideration that I must make). I can, of course, add a hidden field to the page so as to submit the adjusted time.
Requirements/Restrictions:
I must use bootstrap-datetimepicker for the input.
I cannot ask the user for their local timezone.
I cannot ask the user for their location.
I cannot display the adjusted timezone to the user.
I cannot edit the PHP which receives the form data and stores it in a mySQL database.
I must use javascript or jQuery to accomplish this (unless there's some HTML/CSS magic I don't know about, this should be a given).
Code:
I'm not sure if it's helpful or not, but here is my code:
$(function() {
if (parseInt($(window).width()) < 768) {
$('#datetimepicker1').datetimepicker({
inline: true,
useCurrent: false,
daysOfWeekDisabled: [0, 6],
defaultDate: false,
showClear: true,
showTodayButton: true
});
} else {
$('#datetimepicker1').datetimepicker({
inline: true,
sideBySide: true,
useCurrent: false,
daysOfWeekDisabled: [0, 6],
defaultDate: false
});
}
});
<!-- BEGIN NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/locales.min.js"></script>
<!-- END NEEDLESSLY LARGE NUMBER OF EXTERNAL LIBRARIES -->
<!-- BEGIN LIKELY IRRELEVANT CODE -->
<form action="some.php" method="post" enctype="multipart/form-data" class="grid-form">
<label>Optimal Date and Time (optional)</label>
<input class="hidden" type="text" name="time" id="datetimepicker1">
<div class="datetimeplaceholder"></div>
<br>
<br>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
<!-- END LIKELY IRRELEVANT CODE -->
In case SO's snippet is unwieldy it is also available on Codepen: codepen.io/anon/pen/gpBgBz
Notes:
I apologize for the verbosity. I have looked and seen similar entries on SO. This is almost certainly what could be considered a duplicate; however, I did not really understand the answers provided. I'm not very good with jQuery, or JS in general. Despite that, I do recognize that this is a poor way of going about this problem. Arbitrary requirements overcomplicate this greatly.
The picker exports a moment.js moment. I figured out how to find a UTC time and date from that moment.
$("form").submit(function() {
var datetime1 = $('#datetimepicker1').data("DateTimePicker").date();
var correctdatetime = datetime1.utc();
$('#datetimepicker1').val(correctdatetime);
}
This accomplishes what I want.

Get php variable containing date from jquery datepicker

I have a jquery datepicker defined like this :
HTML/php:
<input id="datepicker" name="date" placeholder="Date" />
Javascript:
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
This works perfectly but i need to get the date in a php variable. I tried $_POST["date"] but this does not work. Could you help me ? Thanks !
The problem is solved, I don't really know where the problem came from. I still use $_POST["date"] to get the date, then I convert it from dd/mm/yyyy to yyyy-mm-dd (because my sql request requires this format) and it works..
Anyway, thanks everyone !

How to change the displayed date format in Datepicker?

I use JQuery UI to input dates and use DatePicker for that.
I need to have date displayed like yyyy-mm-dd.
I tried this solution suggested in this answer in the console: how to change dateformat of jquery Datepicker
$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });
returned in the console:
[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​,
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">]
But no changes took effect.
So, how to change the displayed date format in Datepicker ?
Later edit:
If I change the type="date" into type="text" (see:http://jsfiddle.net/Zksv5/) the code works, but I want to make it work for the type date format.
So, how to change the displayed date format in Datepicker when input has the type="date" attribute?
refer this working jsfiddle
<input type="text" value="" class="date-input" id="TxtStrtDate" >
$(".date-input").datepicker({
dateFormat: 'yy-dd-mm'
});
What you are doing is the right way to format the datepicker in jQuery UI.
See here: http://jsfiddle.net/abhitalks/w5YQk/
HTML:
<input id="dated" />
jQuery Code:
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
Update (based on your comment on HTML5 date type):
Without repeating what has already been described here:
Is there any way to change input type="date" format?:
The short answer is that the wire format in specifications is
"yyyy-mm-dd", but the browsers are free to decide on the
presentation. Some browsers (like Chrome) present the date as in
client machine's regional settings, whereas others (like Opera)
present the wire format. So, you can't do much here.
The jQuery UI datepicker will fail when the input is HTML5 date
type. In fact it will work only when the format is set, and that
will convert itself to the wire format of the date type input! So,
again you can't do much here.
Ideally, you should present a jQuery (or any other) datepicker
only if there is no browser support for HTML5 date type. If it is supported, the default browser implementation should be preferred.
So, you have two options here: (a) Use regular text type and attach datepicker to provide common look and feel. (b) Rely on date type and fallback to datepicker only if browser doesn't support HTML5 date type.
You could use any library of your choice to take decisions based on browser feature detection. (e.g. Modernizr etc.)
If you want to do it yourself, then this example will help you (explanation embedded as code comments):
Demo: http://jsfiddle.net/abhitalks/w5YQk/3/
HTML:
<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->
jQuery Code:
var dtType;
// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });
// We check the type of the second element
dtType = document.getElementById("dated2").type;
/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/
if (dtType == "text") {
// Attach datepicker only if type is "text"
$("#dated2").datepicker();
}
This takes advantage of the fact that the browsers which do not support the HTML5 date type will default to text and so the element will be of text type in the DOM.
Hope that helps.

Combine inline jquery datepicker with an input field?

I know that I can use $('div').datepicker() to get an inline datepicker, but how do I show the datepicker fixed inline underneath its input field?
The alt field option does not work for me because I want the datepicker to also react on a date entered into the input field.
I would need something like the following pseudocode:
<inputfield type="text" id="d" >
<div id="z"></div>
<script> $('#z').datepicker().bindToInputfield($('#d')) </script>
Try this: Working demo http://jsfiddle.net/KRFCH/
The altField option will link to the second field you want! http://jqueryui.com/datepicker/#alt-field
Now note: any change in the input will reflect in the datepicker on change
This should fit your cause :)
Code
$('#z').datepicker({
inline: true,
altField: '#d'
});
$('#d').change(function(){
$('#z').datepicker('setDate', $(this).val());
});
It's not possible to get the datepicker inline just by using the input field . You need to use a div along with an input to get what you want.
NOTE: Any changes made in the input will reflect in the datepicker
Example Code
<input type="text" id="text" />
<div id="mydiv"></div>
<script>
$('#mydiv').datepicker();
$('#text').change(function(){
$('#mydiv').datepicker('setDate', $(this).val());
});
$('#mydiv').change(function(){
$('#text').attr('value',$(this).val());
});
</script>
Check out this jsfiddle I've created for you: http://jsfiddle.net/v9XCP/

I need javascript to automatically prefix+suffix as it populates a field? I want it to be surrounded with apostrophes?

div with-altfield is a multidatepicker. Upon selection of a date it populates the altfield input. In format, mm/dd/yy,mm/dd/yy,.. I want it to actually populate the input with apostrophes surrounding the date selected. Like, 'mm/dd/yy','mm/dd/yy',... this is my code.
<script type="text/javascript">
$(function() {
$('#with-altField').multiDatesPicker({
altField: '#altField',
});;
});
</script>
</head>
<body>
<div id="with-altField"></div>
<input type="text" id="altField">
</body>
Please help!
Thank you
Si
Just use the dateFormat option. The syntax is explained here.
$('#with-altField').multiDatesPicker({
altField: '#altField',
dateFormat: "''mm/dd/yy''"
});

Categories

Resources