Im trying to get rid of the drop down menu here (circled in red) and have just display the month (circled in green)
Here is my code for the datepicker so far:
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Get rid of changeMonth: true,.
jsFiddle example
Related
I'm trying to figure out how to use the jquery-UI datepicker to fit onto a mobile screen. It's just fine on large screens but does not behave responsibly on mobiles. Is there anything I can do with the css to make it fit onto smaller screens? I've made a fiddle here.
html
<div class="col-xs-11 col-lg-4 col-md-4 col-centered">
<label for="start"></label>
<input type="text" id="date-picker-input-1" class="" name="start" placeholder="From">
</div>
<div class="col-xs-11 col-lg-4 col-md-4 col-centered">
<label for="end"></label>
<input type="text" id="end" name="end" placeholder="To">
</div>
Jquery
$(function() {
$( "#date-picker-input-1" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#end" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#end" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
onClose: function( selectedDate ) {
$( "#start" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
Have the following code... (in a bootstrap environment)
<script>
$(document).ready(function(){
$( "#DateValidfrom" ).datepicker( {
showAnim: "clip",
minDate: +2,
maxDate: "+24M +1D",
dateFormat: "DD, d M yy",
altFormat: "yy-mm-dd",
altField: "#alt-date",
changeMonth: true,
changeYear: true,
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
});
$( "#DateValidTo" ).datepicker({dateFormat: "yy-mm-dd"});
});
</script>
All works good - no probs UNTIL I click out of the datepicker field say to go to fill out a another field, come back to the datepicker field, click, and get the error "Uncaught TypeError: Cannot read property 'setDate' of null(…)"
I refresh the page - all good again..
So, first click - works well, click out and come back again - no go - error as above.
This part of the code the problem?
onClose: function() {
var date2 = $('#DateValidfrom').datepicker('getDate');
date2.setDate(date2.getDate()+364)
$( "#DateValidTo" ).datepicker("setDate", date2);
}
The 3 fields are
<input type="text" id="DateValidfrom" name="DateValidfrom" readonly class="form-control" required>
<input type="hidden" id="alt-date" name="DateValidfrom" />
<input name="DateValidTo" type="hidden" id="DateValidTo">
Arrrgghhhh.... Surely it can't be this simple???
Changed
onClose: function() {
To
onSelect: function() {
Seems to work? Correct?
When I activate the jQuery UI I would like to have a default value, both for 'to' and 'from' that is today's date, and how should I do it based on the code below?
'http://jsbin.com/ceyuhudajo/edit?html,output'
$(function() {
$( "#from").datepicker({
showWeek: true,
firstDay: 1,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
showWeek: true,
firstDay: 1,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,
dateFormat: "yy-mm-dd",
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
Thanks!
You should delete:
defaultDate: "+1w"
which sets the default date to be one week ahead.
So i am trying to restrict the user from selecting the check-out date
to be the same as the check-in date using jQuery UI Date range picker
(http://jqueryui.com/datepicker/#date-range). I have it where they are
not able to select before the check-in date but as of right now the
check-in date and check-out date can be the same files.
This is the jquery
$(function() {
$( "#check-in" ).datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
$( "#check-out" ).datepicker( "option", "minDate", selectedDate);
}
});
$( "#check-out" ).datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D");
}
});
});
This is the HTML
<div class="formInput">
<label for="check-in">Check-in:</label>
<input type="text" id="check-in" name="check-in" value="yyyy/mm/dd" size="30" class="textInput">
</div>
<div class="formInput">
<label for="check-out">Check-out:</label>
<input type="text" id="check-out" name="check-out" value="yyyy/mm/dd" size="30" class="textInput">
</div>
What I want is the check out date to default to 1 day after the check in date every time the check-in date is selected. Thank you in advance
You can't add days using this code
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")
Try this instead:
onClose: function( selectedDate, inst ) {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$( "#check-in" ).datepicker( "option", "maxDate", maxDate);
}
Here's the fiddle: http://jsfiddle.net/RxTax/1/
change minDate.setDate(maxDate.getDate() + 1);
to minDate.setDate(minDate.getDate() + 1);
the fact is that is just working with dateFormat: "yy-mm-dd" and not with other dateFormat as regional fr or alike.
I have written a work-around for other dateFormats using alternate fields. I tested on IE chrome and Firefox and works quite good.
function resetFrom() {
var altcheck-in = document.getElementById("altcheck-in");
var check-in= document.getElementById("check-in");
altcheck-in.value = "";
if (altcheck-in.value == "") {
check-in.value = "";
$("#check-out").datepicker("destroy");
$("#check-out").datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-out",
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$("#check-in").datepicker("option", "maxDate", maxDate);
}
}
});
}
}
function resetTo() {
var altcheck-out = document.getElementById("altcheck-out");
var check-out = document.getElementById("check-out");
altTo.value = "";
if (altcheck-out.value == "") {
to.value = "";
$("#check-in").datepicker("destroy");
$("#check-in").datepicker({
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-in",
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(minDate.getDate() + 1);
$("#check-out").datepicker("option", "minDate", minDate);
}
}
});
}
}
$(function () {
$("#check-in").datepicker({
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-in",
minDate: 0,
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(minDate.getDate() + 1);
$("#check-out").datepicker("option", "minDate", minDate);
}
}
});
$("#check-out").datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
altFormat: "dd-mm-yy",
altField: "#altcheck-out",
changeMonth: true,
numberOfMonths: 1,
changeYear: true,
showOn: "button",
buttonImage: "/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select date",
onClose: function (selectedDate) {
if (selectedDate != "") {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$("#check-in").datepicker("option", "maxDate", maxDate);
}
}
});
});
<input name="altcheck-in" type="text" id="altcheck-in" onchange="resetFrom();" style="width:250px;" />
<input name="check-in" type="text" id="check-in" style="display: none" />
<input name="altcheck-out" type="text" id="altcheck-out" onchange="resetTo();" style="width:250px;" />
<input name="check-out" type="text" id="check-out" style="display: none" />
JQuery UI date picker end date 1 day after start date
http://jsfiddle.net/wskhcgdq/1/
You can't add days using this code
$( "#check-in" ).datepicker( "option", "maxDate", selectedDate +"+1D")
Try this instead:
$(function() {
$( "#check-in" ).datepicker({
minDate: 0,
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
var minDate = new Date(Date.parse(selectedDate));
minDate.setDate(maxDate.getDate() + 1);
$( "#check-out" ).datepicker( "option", "minDate", minDate);
}
});
$( "#check-out" ).datepicker({
minDate: "+1D",
dateFormat: "yy-mm-dd",
changeMonth: true,
numberOfMonths: 2,
changeYear: true,
onClose: function( selectedDate, inst ) {
var maxDate = new Date(Date.parse(selectedDate));
maxDate.setDate(maxDate.getDate() - 1);
$( "#check-in" ).datepicker( "option", "maxDate", maxDate);
}
});
});
I have a datepicker form included on each page of a financial accounting web site. The date picker is designed to allow users to select a range of dates for the data that they want displayed.
Unfortunately, the only way to get the calendars to appear when the text field has focus, as a user navigates from page to page, is for a hard refresh (Ctrl-R). Not the optimum.
here's the form:
<li data-data-theme='b' >
<label for="from">From</label>
<input type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
</li>
And here's the jquery:
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
}
$(document).ready(function(){
console.log("hello world");
$(function() {
console.log("hello world 2");
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
showOn: 'button',
buttonImage: 'images/datepicker_icon.png',
buttonImageOnly: true,
onSelect: function( selectedDate ) {
$( "#to" ).datepicker();
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
changeYear: true,
numberOfMonths: 3,
stepMonths: 3,
showOtherMonths: true,
showOptions: {direction: 'up'},
showButtonPanel: true,
yearRange: "2011:2019",
showAnim: "fold",
dateFormat: "yy-mm-dd",
onSelect: function( selectedDate ) {
$( "#from" ).datepicker();
}
});
});
});
I have tried changing the form to include reference to a class: eg:
<li data-data-theme='b' >
<label for="from">From</label>
<input class='datepicker' type="text" id="from" name="from"/>
</li>
<li data-data-theme='d'>
<label for="to">to</label>
<input class='datepicker' type="text" id="to" name="to"/>
</li>
and then referencing that in the jquery function thus:
$(function() {
console.log("hello world 2");
$( ".datepicker" ).datepicker({
...
onSelect: function( selectedDate ) {
$( ".datepicker" ).datepicker();
}
});
});
but all to no avail.
So, here's the question: how do I have the datepicker calendar appear when a user navigates to a new page on the web site?
would you like to open datepicker by default..when user comes to these pages. if yes you have to configure display inline property of datepicker see example Example datepicker display inline
$(function() {
$('#datepicker').datepicker({altField: '#date1'});
});