I want date picker. I don't want time. I am getting an error message like
my html coding is;
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type='text' class="form-control" placeholder="Issue Date"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
script code
<link rel="stylesheet" href="css\bootstrap.css">
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" href="css\font-awesome.min.css">
<link rel="stylesheet" href="css\bootstrap-social.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="js\jquery.min.js"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\jquery-3.1.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
I cannot get that calandar when i click that textbox or calander addon.
thanks
You can't use .datepicker() it must be .datetimepicker().If you don't want the time just set the format parameter:
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({ format: 'DD/MM/YYYY' });
});
</script>
Article for reference - Bootstrap datetimepicker options
You need to do small change. Remove div's id and place that id in input tag with type="text" as shown below
<div class="col-md-2 padding-size">
<div class="form-group">
<div class="input-group date" >
<input type='text' class="form-control" placeholder="Issue Date" id="datetimepicker1"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
Then add below script using same id
<script type="text/javascript">
$(function ()
{
$('#datetimepicker1').datepicker(
{
});
});
</script>
Use the below code:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link href="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/css/datepicker.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<script src="http://cdn.jsdelivr.net/bootstrap.datepicker/0.1/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#datepicker").datepicker(
{viewMode: 'month',
format: 'dd-mm-yyyy'
});
});
</script>
</head>
<body>
<div class="input-append date" id="datepicker" data-date="02-2012">
<input type="text" readonly="readonly" name="date" >
<span class="add-on"><i class="icon-th"></i></span>
</div>
</body>
</html>
Change the date format as you wish by changing the format parameter.
Check out this http://jsfiddle.net/Kz2sW/
Related
There is my code, but it is not working correctly bootstrap.
i made this code and downloaded all the package from Visual studio, please tell ma solution.
please help me.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="Scripts/moment.js"></script>
<script src="Scripts/bootstrap-datetimepicker.js"></script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
</div>
</div>
</form>
</body>
</html>
The order of your css and js files is really important here and also more code is required for your date time picker.
I have improved your code a little bit and see if this works for you!
<!--- Date Time Picker Css --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--- Jquery --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--- Your Form --->
<form id="form1" runat="server">
<div class="form-group" style="margin: 50px;">
<div class="row">
<div class="col-md-8">
<label class="control-label">MY Date Time Picker</label>
<!--- Included datetime picker --->
<div class='input-group date' id='datetimepicker12'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</form>
<!-- your own javascript -->
<script type="text/javascript">
$(function() {
$('#datetimepicker12').datetimepicker();
});
</script>
<!-- CDN JS Deliver -->
<script src="https://cdn.jsdelivr.net/momentjs/2.14.1/moment.min.js"></script>
<!-- Bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- CDN js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js">
</script>
I am using bootstrap to make my form. I am unable to use bootstrap datetimepicker in my project. Can master page be a problem?
Please help me out here.
Jquery and Sheets:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script type="text/javascript">
$(document).ready(function() {
$(function () {
$("#dp").click(function () {
$('#datetimepicker1').datetimepicker();
})
})
});
</script>
ASPX Code:
<div class="col-md-3">
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span id="dp" class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
use var date_input = $('#<%=date.ClientID%>'); and set clientmodeid to static.
I'm looking for an easy to use date time picker. I tried to use bootstrap date time picker and I'm using bootstrap 4 alpha. It does not work for me.
Here is my code:
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Moment JS -->
<script type="text/javascript" src="<?php echo $ROOT; ?>js/moment.min.js"></script>
<!--Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" ></script>
<!-- dateTimePicker JS -->
<script type="text/javascript" src="<?php echo $ROOT; ?>js/bootstrap-datetimepicker.min.js"></script>
<!--bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<!-- dateTimePicker CSS -->
<link rel="stylesheet" type="text/css" href="<?php echo $ROOT; ?>css/bootstrap-datetimepicker.min.css">
<div class = "form-group col col-md-4 col-sm-4 col-12">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id="servDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
I suggest to use: https://tempusdominus.github.io/bootstrap-4/ which is the Bootstrap 4 version of DateTimePicker (successor of Eonasdan/bootstrap-datetimepicker).
You can find examples in the documentation: https://tempusdominus.github.io/bootstrap-4/Usage/
Github repo: https://github.com/tempusdominus/bootstrap-4
However here is a working snippet from tempusdominus docs (best view expanding snippet):
$(function () {
$('#datetimepicker1').datetimepicker();
});
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<span class="input-group-addon" data-target="#datetimepicker1" data-toggle="datetimepicker">
<span class="fa fa-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Use stable library, may be you doesn't know where is bug in beta version ;)
Try this
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Moment JS -->
<script type="text/javascript" src="//momentjs.com/downloads/moment.js"></script>
<!--Bootstrap JS -->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- dateTimePicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<!-- dateTimePicker CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script>
$(function() {
$('#datetimepicker1').datetimepicker();
});
</script>
<div class = "form-group col col-md-4 col-sm-4 col-12">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" id="servDate"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Might be a little help ^_^
Try to use Bootstrap 3.
Found some helpful link: https://eonasdan.github.io/bootstrap-datetimepicker/
Hope this helps.
I am using the bootstrap datepicker for a Date of Birth field.
But apparently users are not using the year drop down field properly.
What I would like to do is have a staged setup, where with 3 clicks they go from choosing year, then month and then the day. I think it would be much more user friendly.
This is how i see it working:
step 1: select year
Step 2: select month
step 3: select day
Does anyone know if this is possible?
Please check this
https://eonasdan.github.io/bootstrap-datetimepicker/
you can change mode like below,
jQuery(function () {
$('#datetimepicker').datetimepicker({
viewMode: 'years'
});
});
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
I am unable to get my code working. I am a newbiew on JS and trying to implement some example I found online on routing on angularJs. I have spent many hours trying to fix it, but could not.
Issue : Default View(View2) is opened by $routeProvider configuration. However, when I redirect this to view2.htm to view1.htm but blank page opens up.
Please help !
HTML CODE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="JS/bootstrap/css/bootstrap-theme.css" rel="Stylesheet" />
<link href="/JS/bootstrap/css/bootstrap-theme.min.css" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap-theme.css.map" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap.css" />
<link href="JS/bootstrap/css/bootstrap.css.map" />
<link href="JS/bootstrap/css/bootstrap.min.css" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.eot" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.svg" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.ttf" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.woff" />
</head>
<script src="JS/jquery-2.1.1.js" language="javascript" type="text/javascript"></script>
<script src="JS/angular.js" language="javascript" type="text/javascript"></script>
<script src="/JS/angular-route.js" language="javascript" type="text/javascript"></script>
<script src="/JS/bootstrap/js/bootstrap.js" language="javascript" type="text/javascript">
</script>
<script src="/JS/bootstrap/js/bootstrap.min.js" language="javascript" type="text/javascript">
</script>
<body>
<title>::DEMO APP:: </title>
<div data-ng-app="demoApp1">
<script src="DemoJS.js" language="text/javascript" type="text/javascript"></script>
<div class="container">
<h3>
All the examples AngularJS Here:</h3>
</div>
<div class="container-fluid" data-ng-view="">
</div>
</div>
</body>
</html>
View1.htm Markup
<div id="View1" >
<h2>
Example 4 & 5
</h2>
<div class="container">
Name <input type="text" data-ng-model="inputData.name" placeholder="Name" />
<br />
City <input type="text" data-ng-model="inputData.city" placeholder="City" />
<br />
<button class="btn btn-primary" data-ng-click="addCustomer()">
Add Customer</button>
<br />
Filter <input type="text" data-ng-model="nameText" placeholder="Filters" />
<br />
<ul>
<li data-ng-repeat="customer in customers |filter:nameText">{{customer.name|uppercase}}
- {{customer.city}} </li>
</ul>
<a ng-href="#/View2.htm">View2</a>
</div>
</div>
View2.htm Markup
<div id="View2">
<h2>
Example 1,2 and 3</h2>
<div class="container">
<h3>
Data Binding Fundamentals</h3>
<h4>
Using a Data Binding Template</h4>
Name:
<input type="text" data-ng-model="name" placeholder="Type something" />
{{ name }}
</div>
<h1>
Example 2</h1>
<div data-ng-init="names=['Sunil','Deepak','Rajat','Somu']">
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<h1>
Example 3</h1>
<div>
<h3>
Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="name in names">{{name}} </li>
</ul>
</div>
<a ng-href="#/View1.htm">View1</a>
</div>
DemoJS.js file code
var demoApp1 = angular.module('demoApp1', ['ngRoute'])
demoApp1.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController1',
templateUrl: '/View2.htm'
})
.when('View1',
{
controller: 'SimpleController',
templateUrl: '/View1.htm'
});
});
demoApp1.controller('SimpleController1', function ($scope) {
$scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
});
demoApp1.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Sunil', city: 'Delhi' },
{ name: 'Ritu', city: 'Shbad' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
}
});
I have found my mistake. The href link I used was not correct. As href is managed by angular itself, we should not add ".html" and the string we mention here should match to $routeProvide config string.. Below is the Modification I Made:
Incorrect on View1.html
<a ng-href="#/View2.htm">View2</a>
Corrected on View1.html:
View2
Samething I did on View2.html.