bootstrap 3 datepicker rendering out of form - asp.net-mvc

I've been working madly to figure out a well-working datepicker. I focused on Bootstrap 3 Datepicker but the problem is the control rendering badly ("goes off the model, corrupted when back to month or year view...)
code is as basic as you see in following example:
<script src="../../js/jquery-2.1.4.min.js"></script>
<script src="../../js/bootstrap-datepicker.js"></script>
<link href="../../css/datepicker.css" rel="stylesheet" />
<link href="../../css/bootstrap.css" rel="stylesheet" />
<!--start date filed-->
<div class="input-group date pull-right" data-provide="datepicker" >
<%: Html.TextBoxFor(mdl=>mdl.startDate,new {#class="form-control", id="startDatePicker", #readonly="readonly", placeholder="Start Date"}) %>
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar" id="startDateBtn" ></span>
</div>
</div>
<!--End of first Date-->
<script type="text/javascript">
$(function () {
$('#startDatePicker').datepicker();
})
</script>

Related

DateTimePicker not display

I want to use Bootstrap DateTimePicker in my web application.
I used this tutorial but it does not work for me.
This is my code (all libraries are imported)
<head>
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.*js"></script>
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
</body>
thank you

Bootstrap datepicker not working in external page modal popup in MVC

The below code to display "Add Date" button and by clicking that button it will display the modal with external mvc view. "CheckDateShow" is the view page here.
<div class="add-dependent left">
<a href="../Home/CheckDateShow" data-toggle="modal" data-target="#myModalAdd">
<img src="../../Reskin/images/banificiary.png" alt="">
<span class="green-btn">Add Date</span>
</a>
</div>
The modal where it would bind given in below code and it exists in same page.
<div class="modal fade dependents-modal" id="myModalAdd">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
The "CheckDateShow" page contains the below code:-
<html>
<head>
<title>..:: Company Logo ::..</title>
<link rel="stylesheet" href="../../css/jquery-ui.css">
<link rel="stylesheet" href="../../css/font-awesome.min.css">
<link rel="stylesheet" href="../../css/bootstrap.css">
<link rel="stylesheet" href="../../css/style.css">
<script src="../../js/jquery-1.10.2.min.js"></script>
<script src="../../js/bootstrap.js"></script>
<script src="../../js/jquery-ui.js"></script>
<script src="../../js/custom.js"></script>
</head>
<body>
<div>
<ul>
<li>
<label for="">Date of Birth:</label>
<div class="input-data date">
<input type="text" class="input-type datepicker">
<i class="fa fa-calendar"></i>
<span class="red">*</span>
</div>
</li>
</ul>
</div>
</body>
</html>
Now by loading this it is showing only a textbox control, but in reality it should display a datepicker rightside of textbox and we can be able to choose a date.
Please help to resolve this issue.

Can't get dialog to open in Jquery mobile

When the proper value is selected I want to open the div with id="new_firm" in a modal dialog. I can't get the dialog to open. I know that the script get's executed since the alert pops up. Can anyone please tell me what's wrong here?
<!DOCTYPE html>
<html>
<head>
<title>FileReader Example</title>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.css" />
<script type="text/javascript" charset="utf-8" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
function openNewFirmDialog() {
var selected = $("#select_firm option:selected");
var ddValue = selected.text();
if(ddValue === "Add a new company") {
//alert(ddValue);
$('#new_firm').dialog({modal:true});
}
}
</script>
</head>
<body>
<div data-role="page" id="add_details">
<div data-role="content">
<h2>Register hours</h2>
hei
<div data-role="fieldcontain">
<select id="select_firm" data-native-menu="false" onchange="openNewFirmDialog()">
<label for="select_firm" class="select">Select firm:</label>
<option data-placeholder="firm">Firm</option>
<option value="internal">Internal</option>
<option value="new_firm_option">Add a new company</option>
</select>
</div>
<input type="text" id="descritptionTxt" value="Description"/>
<div data-role="controllgroup" data-type="horizontal">
<input type="range" id="number_of_hours" min="0" max="24" step="0.25" value="0" />
<input type="range" id="number_of_minutes" min="0" max="24" step="0.25" value="0" />
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Overview</li>
<li>Add hours </li>
<li>Settings</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="new_firm">
<h2>Add a new firm</h2>
<textarea id="the_new_firm" value="New firm"/>
</div>
</body>

I think you need to add reference to jQuery UI if you want to use dialogs. Available for download here: http://jqueryui.com/demos/dialog/

how to set particular date in jquery mobile datebox control, highlight it in datepicker

I am creating one application with jquery.mobile-1.0a4.1 release. I have a page which is having input form to get details. It has date field , so for that I used jquery.mobile.datebox . See http://dev.jtsage.com/ for its demo.
I am facing one issue with it, when I set particular date value for date field on page-load , the value is shown in textbox. But when user click on date-picker icon- the calendar still highlight today's date and show current month only.
If anybody has used the same control then please help about , how to achieve like if there is any date value the text box then when you launch the datepicker, it should start from that date.
For eg. here I am setting date of March month, then ,when user clicks on datepicker , march month calendar should be shown.
Here is my code file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>Detailed information</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.css" />
<link type="text/css" href="jquery.mobile.datebox.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = 'text';
});
</script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile.datebox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Setting start date value on pageload
$('#startdate').val('2011-03-20');
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="inline">
back
<h1>Detailed Information</h1>
</div>
<div data-role="content">
<form action="" method="get" onsubmit="validate();" id="frmdetailedinfo">
<div data-role="fieldcontain">
<input readonly="true" name="startdate" type="date" data-role="datebox" id="startdate" data-options='{"mode": "calbox", "useDialogForceFalse": true, "noAnimation": true}'/>
</div>
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<button type="submit" data-theme="a" name="submit" data-icon="check" value="submit-value">
Save
</button>
</div>
</fieldset>
</div>
</form>
</div>
<!--content-->
</div>
<!--page-->
</body>
</html>

You have to set it in the tag itself:
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true
}'/>
Becomes this
<input readonly="true"
name="startdate"
type="date"
data-role="datebox"
id="startdate"
data-options='{
"mode": "calbox",
"useDialogForceFalse": true,
"noAnimation": true,
"defaultDate": "1999-03-20" // Add Default Date
}'/>

jquery ui accordions within tabs

I’ve run into a problem using accordions within tabs, the initially inactive accordions do not render their content correctly when their tab is selected.
Reading around I see the reason for this is that the inactive tabs have display:none initially, so the height of the divs within the accordion do not get calculated correctly. None of the suggested solutions work for me.
Have has anyone overcome this or have a work around?
Here's some example code of the problem:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="main" class="round roundB">
<div id="tabs">
<ul>
<li>Tab 1 </li>
<li>Tab 2 </li>
</ul>
<div id="tab1">
<div id="accordion1">
<h3>Section 1</h3>
<div>
<p>
TAB 1 Accordion 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
TAB 1 Accordion 2
</p>
</div>
</div>
</div>
<div id="tab2">
<div id="accordion2">
<h3>Section 1</h3>
<div>
<p>
TAB 2 Accordion 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
TAB 2 Accordion 2
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I had the same problem before.
The solution is: You must active accordion before tabs.
$("#accordion").accordion();
$("#tabs").tabs();
Maybe you need left align.
.ui-accordion-header{
text-align: left;
}
good luck

After reading the stated problem, it was my impression that a problem I have run into was of a similar nature. Using the accordion functionality within a tab was forcing my accordion content to contain a scrollbar, a feature I did not want.
For some reason or another, the current solution provided did not work for me.
The solution I found was to overwrite the default accordion setting of autoHeight (default of true, overwrite to false)
$("#accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();

Initialize accordion when you activate tab:
sample:
$('.selector').bind('tabsadd', function(event, ui) {
...
});
your sample:
<script type="text/javascript">
$(document).ready(function(){
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$("#accordion1").accordion();
$("#accordion2").accordion();
});
});
</script>
Maybe that you will need to initialize every accordion special for each tab.
Or use latest UI lib:
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

$( "#tabs" ).tabs({
load: function(event, ui) {
$("#"+ui.panel.id+" .accordians:first").accordion();
}
});
This worked when using ajax html with tabs.

None of the above worked for me. For me, the trick was to change from using unique div IDs for each accordion to a single class identification for all accordions. That is, change: <div id="accordion1>, <div id="accordion2>,etc... to<div class="accordion"> within each of the tabs.
You may also need to add to your $(document).ready function
$(".accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$(".accordion").accordion("resize");
});
So the format would be:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.7.2.custom.css" media="screen" />
<script type='text/javascript' src='../scripts/jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='../scripts/jquery-ui-1.7.2.custom.js'></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".accordion").accordion({
autoHeight: false
});
$('#tabs').tabs();
$('#tabs').bind('tabshow', function(event, ui) {
$(".accordion").accordion("resize");
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li>User</li>
<li>Folders</li>
<li>Decks</li>
</ul>
<div id="tabs-1">
<div class='accordion'>
<h3>Header 1</h3>
<div</div>
<h3>Header 2</h3>
<div></div>
<h3>Header 3</h3>
<div><</div>
</div>
</div>
<div id="tabs-2">
<div class='accordion'>
<h3>Header 4</h3>
<div</div>
<h3>Header 5</h3>
<div></div>
<h3>Header 6</h3>
<div><</div>
</div>
</div>
<div id="tabs-3">
<div class='accordion'>
<h3>Header 7</h3>
<div</div>
<h3>Header 8</h3>
<div></div>
<h3>Header 9</h3>
<div><</div>
</div>
</div>
</div>
</body>
</html>

See
http://bugs.jqueryui.com/ticket/5601
.ui-helper-clearfix { display:block; min-width: 0; overflow: hidden; }

just read carefully http://docs.jquery.com/UI/Tabs#
there is an answer. it's simpliest way

Resources