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.
Related
I implemented in my app a JQ Datepicker calendar on its default version, but I cannot understand how to show in the input field always the date the today date to be precise. Now when I open the page where is the datepicker, the input field is blank until I select the date I need.
What I would like to see is that the date is always visible on the input filed if that possible.
My Datepicker:
//Date Picker
$("*[data-behavior~=shipping-date-input]").datepicker({
onSelect: function() {
digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
altField: "#recorded-at-alt",
dateFormat: "yy-mm-dd",
minDate: "-1Y",
maxDate: "+1Y"
});
Screenshot of what I mean as you see the input is blank in his initial state:
To populate the value of the text field, you can use $.datepicker.formatDate( format, date, options ) feature. here is an example:
$(function() {
var dtFt = "yy-mm-dd";
$("#datepicker").datepicker({
onSelect: function() {
/*digest = cargoflux.generateUUID();
cargoflux.resetCalculatedFields();
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (cargoflux.validInput()) {
cargoflux.resetCalculatedFields();
cargoflux.getAvailableCarrierProducts();
}
}, 1500);
*/
},
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
//altField: "#recorded-at-alt",
dateFormat: dtFt,
minDate: "-1Y",
maxDate: "+1Y"
}).val($.datepicker.formatDate(dtFt, new Date()));
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
As you can see, we populate the text field value, $("#datepicker").val();.
Hope that helps.
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 );
}
});
});
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
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'});
});