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
Related
The below given code is not working even after including all the script files.I cannot see the toggle happen on the panel.
What needs to be added to the code?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="row aet-content-fluid">
<div class="panel-group ud-accordion" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<div class="panel-title">
<h2>
<a role="button" data-parent="#accordion"
data-toggle="collapse" href="javascript:void(0);#tab1" aria-controls="tab1"
class="" aria-expanded="false"><span>Office Information</span>
</a>
</h2>
</div>
</div>
<div id="tab1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body office-detail-panelBody">
This content is straight in the template.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
It took me a while but it seems the problem is in scripts you included.
First you need a jquery included.
And the second: Order is important.
When I set the <head> section to:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="example.js"></script>
</head>
It worked! Three first inclusions (link and two scripts) is the order recommended by bootstrap creators.
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>
When I run this project from the terminal like so
cd to AppointmentScheduler
node index.js
I am now receiving the following erorr in the console
Uncaught TypeError: undefined is not a functionangular-route.js:26 (anonymous function)angular-route.js:6 (anonymous function)
This is the index.html
<html>
<head ng-app="appointments">
<title>Appointments</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>
<div class="container">
<h1>Piar Appointments Scheduler</h1>
<div ng-view></div>
</div>
</body>
</html>
This is the login.html
<div class="row-fluid">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label" required>Email</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
This is the public/js/app.js
var appointments = angular.module('appointments', ['ngRoute']);
appointments.config(function ($routeProvider) {
$routeProvider
.when('/',
{templateUrl: 'partials/login.html'})
})
This is the public/js/controllers/app.js That has been edited, sorry about the error of repeating the content of the public/js/app.js here
function LoginCtrl ($scope)
{
}
currently watching up and running with angularjs by Joseph LeBlanc from Lynda.com
Your js/app.js and js/controllers/app.js seems to be exactly the same - but I think the problem is that you are trying to use ngRoute without loading it
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
Also, put ng-app to <html> or <body> element, if you have in on <head>, that will be the root element of your application so it won't even touch <body>
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/
I'm trying to place a Markdown Editor inside jQuery-UI Tabs, but the editor is not being shown.
<% Using Html.BeginForm()%>
<div id="AddEventWizard">
<ul>
<li>Event Title</li>
<li>Event Description</li>
</ul>
<div id="tabs-1">
<%: Html.LabelFor(Function(model) model.Name)%>
<%: Html.TextBoxFor(Function(model) model.Name, New With{.class = "full-width-input"})%>
<%: Html.ValidationMessage("Name", "*")%>
</div>
<div id="tabs-2">
<noscript><h3>Please use
<%: Html.ActionLink("Markdown", "Markdown", "About")%>
to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
<%: Html.TextAreaFor(Function(model) model.Description, 5, 10, New With {.id = "wmd-input", .class = "wmd-panel"})%>
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
</div>
<% End Using%>
<script type="text/javascript">
$(document).ready(function () {
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
$("#AddEventWizard").tabs({
});
}); // closes document.ready
</script>
There is space where the editor buttons "should" be, but they're not there. Does anyone know if the jQuery-UI stuff somehow blocks WMD Markdown?
Edit:
I'm using the version from Github
HTML Markup
<form action="/events/addevent" method="post">
<div id="AddEventWizard">
<ul>
<li>Event Title</li>
<li>Event Details</li>
<li>Event Description</li>
</ul>
<div id="tabs-1">
<label for="Name">Name</label>
<input class="full-width-input" id="Name" name="Name" type="text" value="" />
</div>
<div id="tabs-2"></div>
<div id="tabs-3">
<noscript><h3>Please use
Markdown
to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
<textarea class="wmd-panel" cols="10" id="wmd-input" name="Description" rows="5">
</textarea>
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
$("#AddEventWizard").tabs({
});
}); // closes document.ready
</script>
<script src="../../Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/jquery.textarearesizer.compressed.js" type="text/javascript"></script>
Maybe you can bind the editor
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
not on $(document).ready but on the click of tab3?
in that way, the editor gets loaded when the textbox is visible.