I am using Material Design and using its date picker. When date picker pops out, the page scrolls down. How can I load the date picker modal without the page scrolling down?
<input id="client-edit-birth-date" type="text" class="datepicker validate">
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15, // Creates a dropdown of 15 years to control year,
container: 'body'
});
I had the same problem and resolved it by setting container to html.
...
container: 'html',
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
demo http://jsfiddle.net/DBpJe/5106/
I do it by utilizing beforeShow function of datepicker:
$('.datepicker').datepicker({
...
beforeShow: function(input, inst)
{
inst.dpDiv.css({position: 'absolute'});
}
...
});
There you can set the position of datepicker's dialog. You have to experiment to find out what kind of css parameters would more suitable in you case/page layout.
Related
Does anybody know why this Script not working? I am trying to disable weekends and previous dates? I have tried searching all over the web but I am struggling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="date" id="date" class="form-control">
<script type="text/javascript">
$(function() {
$( "#date" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
minDate : 'now'
});
});
</script>
DatePicker
According to documentation, you simply need to disable the days of the week by utilizing numbers 0-6. Sunday starting at 0 and Saturday ending at 6, and obviously, every other day of the week assigned accordingly. Also, the format of daysOfWeekDisabled is a comma delimited string which you will see below. In order to only show today's date and on, simply set a minDate of today's date. All of the above is implemented in code below:
let dateToday = new Date();
$('#date').datepicker({
daysOfWeekDisabled: '0, 6',
minDate: dateToday
})
In your case, the problem is you have input type as date but if you change that to test it will work.
Working Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<head>
<script type="text/javascript">
$(function () {
$("#date").datepicker({
beforeShowDay: $.datepicker.noWeekends,
minDate : 'now'
});
});
</script>
</head>
<body>
<input type="text" id="date" />
</body>
</html>
I have a jquery datepicker and the problem I'm having is I want to be able to toggle the datepicker to open and close when the button/textfield is clicked, but right now I have to either select a day or click outside of the calendar (somewhere on the screen) to close the datepicker. I want to open and close it by pressing and pressing again (toggle) on the same button to open and close it.
FYI - I know there's a hide method for datepicker but not sure if that will work here
Here is link to the Fiddle and some code below
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});
#ui-datepicker-div { font-size: 12px; }
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>
Try:
$('#date1').click(function(e) {
if ($(this).data('count')) { // toggle
if ($('#ui-datepicker-div').is(':visible')){
$('#date1').datepicker('hide');
} else {
$('#date1').datepicker('show');
}
} else { // first click
$(this).data('count', 1);
}
});
$('#date1').blur(function() {
$(this).data('count', '')
});
$('#date1').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: "m/d/yy"
});
#ui-datepicker-div {
font-size: 12px;
position: relative !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>
On click of textbox, a calendar opens with current month. I want to open the calendar to specific date.Currently, the calendar opens opens to current month view. Can some one please help me with this? Thanks!
Select Date: <input type="text" id="datepicker"/>
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
onSelect: function (date, inst) {
//MyLogic
}
});
You can use the defaultDate option to open to a specific date. Let's assume you want it to open to July 1st, 2014:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date(2014, 6, 1)
onSelect: function (date, inst) {
//MyLogic
}
});
The format for date is year/month/day. Note: for the month, it is month - 1. So January (1st month) would be 0 and February (2nd month) would be 1.
Alternatively, you can also specify the same date like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('1 July 2014')
onSelect: function (date, inst) {
//MyLogic
}
});
You can also define the defaultDate like so:
$('#datepicker').datepicker({
dateFormat: 'mm-dd-yy',
beforeShowDay: enableAllTheseDays,
defaultDate: new Date('7/1/2014')
onSelect: function (date, inst) {
//MyLogic
}
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<script>
$(document).ready(function(){
$(function() {
$( "#datepicker" ).datepicker({
defaultDate: '-2m'
});
});
});
</script>
</body>
</html>
Hi Friends I am new with intel XDK.
My Code :-
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script>
$(function() {
$( "#txt_date" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<input type="text" name="text-date" id="txt_date" value="" readonly="true" >
</body>
</html>
I Tried also read only property of input text but I could not solved My problem.
Problem :
Here My problem is that when I click on input text then I get fine Jquery Datepicker.But with Datepicker I also get Keyboard on my mobile device.So if somebody have solution of this problem so please help me.
Thanks in Advance!!
I think you should go this way:
$(function() {
$("#txt_date").keypress(function(event) {
event.preventDefault();
});
$( "#txt_date" ).datepicker({
changeMonth: true,
changeYear: true
});
});
I have 2 Text box accepting date from the calender control. One is From & another is To.
I would like take the date accordingly as follows.
On the 1st text box(from),It can only take the today & any other Previous date.
But, the 2nd text box(To),It takes the today date & it should take the date not less than the date which is taken on the 1st text box.
how can i do this in .net.
This is my code.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#txtfrom").datepicker({ maxDate:0 });
});
</script>
<script type="text/javascript">
$(function () {
$("#txtto").datepicker({});
});
</script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="demo">
<b>From:</b> <asp:TextBox ID="txtfrom" runat="server" />
   
<b>To:</b><asp:TextBox ID="txtto" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
My first text box is working properly.But Can you help on the codeing of 2nd text box.
Set up your datepickers like this:
$("#txtFrom").datepicker({
onSelect: function (selectedDate) {
$("#txtTo").datepicker("option", "minDate", selectedDate);
}
});
$("#txtTo").datepicker({
onSelect: function (selectedDate) {
$("#txtFrom").datepicker("option", "maxDate", selectedDate);
}
});
What it effectively is doing is to change the option minDate and maxDate for txtFrom and txtTo respectively, when the date is selected in the datepicker.
Just add a new rows as you have done for to date:
$(function () {
$('[id$=txtTo]').datepicker();
$('[id$=txtFrom]').datepicker();
});
And there is no need to Use {}
if you want to add ranges then try the below code:
$('[id$=txtFrom]').datepicker({
onSelect: function (selectedDate) {
$('[id$=txtTo]').datepicker("option", "minDate", selectedDate);
}
});
$('[id$=txtFrom]').datepicker({
onSelect: function (selectedDate) {
$('[id$=txtFrom]').datepicker("option", "maxDate", selectedDate);
}
});
remove the {} in
$("#txtto").datepicker({});
I think.