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 );
}
});
});
Related
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.
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
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'});
});
I am using JQuery's UI datepicker: http://jqueryui.com/demos/datepicker/
implemented here:
http://www.clients.eirestudio.net/old/
I want to use a link as the trigger but I can't get it to work.
Here is my code:
// JQuery UI
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy'
});
<p class="clearfix hidden">
<input id="" class="input float datepicker" type="input" name="" value="" />
<a class="calendar ui-icon ui-icon-calendar">Date</a>
<span class="mid-info">To</span>
<input id="" class="input datepicker" type="input" name="" value="" />
<a class="calendar" href="#">Date</a>
</p>
Any ideas?
You could do something like I did in this fiddle
HTML:
Toggle
JS:
var $dp = $("<input type='text' />").hide().datepicker({
onSelect: function(dateText, inst) {
$("body").append("<div>Selected "+dateText+"</div>");
}
}).appendTo('body');
$("#toggleDP").button().click(function(e) {
if ($dp.datepicker('widget').is(':hidden')) {
$dp.show().datepicker('show').hide();
$dp.datepicker("widget").position({
my: "left top",
at: "right top",
of: this
});
} else {
$dp.hide();
}
//e.preventDefault();
});
I just solved this very easily in my app -- if you have your datepicker open with a text field, you can use this solution too. I added a $('#date_field').focus() link to the icon. Click the icon, the text field gets focus and that triggers the datepicker to open. Voila.
Try using:
Text here
<input type="hidden" id="inputID"/>
...
<script type="text/javascript">
$(document).ready(
function()
{
$('#inputID').datepicker();
}
);
</script>
This might help somebody else.
I ended up getting it to work with JQuery UI.
Code below:
$(".date-pick").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'http://www.example.com/elements/images/calendar.png',
buttonImageOnly: true
});
and I changed the datepicker id to date-pick class
Based on #camilokawerin answer, I did this and I find it the easieast and cleanest solution:
HTML:
Click <div id="datepicker" style="display:none"></div>
JS:
$("#datepicker").datepicker();
$('#selec').click(function(){
$('#datepicker').toggle();
});
From jqueryui, it seems like you should add showOn and maybe (don't know if it's required) buttonImage:
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
maxDate: '0m 0d',
minDate: new Date(2000, 1 - 1, 1),
dateFormat: 'dd-mm-yy',
showOn: 'button',
buttonImage: 'images/calendar.gif', // adapt this to your image
buttonImageOnly: true
});
With inline datepicker is pretty easier to do this. Check my JSFiddle.
HTML
Pick a date
JS
var dpToggler = $('a.datepicker').button(),
dp = $("<div />").css('position', 'absolute').hide().datepicker().appendTo(dpToggler);
dpToggler.on('click', function(e) {
e.preventDefault();
if (dp.is(':hidden')) {
dp.show().position({
my: 'left top',
at: 'right top',
of: this
});
} else {
dp.hide();
}
});