I'm studying on how to use bootstrap datepicker but i need it to show only the months or year just like this:
but the result only became like this:
I only need to pick the month and the year not the whole calendar.
Below is my whole code snippet:
$(document).ready(() => {
$("#datepicker").datepicker( {
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
})
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>My Teasting Website</title>
<!--Bootstrap css-->
<link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
<!--bootstrap-datepicker css-->
<link rel="stylesheet" href="/src/datepicker/css/datepicker.css">
</head>
<body>
<input type="text" readonly="readonly" name="date" id="datepicker">
<script src="/src/jquery.js"></script>
<!--Bootstrap js-->
<script src="src/bootstrap/js/bootstrap.min.js"></script>
<script src="/src/datepicker/js/bootstrap-datepicker.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
The functionality you are looking for is in datetimepicker, not in just datepicker. It has the UI the way you want.
Note: The calendar will show Month or Year, but when you select a particular value, it will show it as YYYY-MM format. It is not possible to show either YYYY or MM in the textbox after selecting the value from calendar.
$(function() {
$('#datetimepicker2').datetimepicker({
viewMode: 'months',
format: 'YYYY-MM'
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<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/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date'>
<input type='text' class="form-control" id='datetimepicker2' />
</div>
</div>
</div>
</div>
</div>
Related
I use this plugin https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
I tried every options. enableTimePicker, targetTextSelector, etc. But its still not working. But my Datepicker is showing and working well. But I cant configure any options in my date picker. Any help would be greatly appreciated
Here is the code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Persian DateTime</title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/bootstrap-theme.min.css" />
<link rel="stylesheet" href="../Content/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.css" />
<script src="../Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div class="container" style="max-width: 400px;">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" id="fromDate1" placeholder="از تاریخ"/>
</div>
</div>
<script src="../Scripts/MdBootstrapPersianDateTimePicker/jalaali.js" type="text/javascript"></script>
<script src="../Scripts/MdBootstrapPersianDateTimePicker/jquery.Bootstrap-PersianDateTimePicker.js" type="text/javascript"></script>
<script>
$('input').MdPersianDateTimePicker({
isGregorian: true,
enableTimePicker: true,
});
</script>
</body>
</html>
I am trying to set the language/locale for the datetimepicker using Tempus Dominus for Bootstrap 4. I followed to the suggestions in Tempus Dominus Bootstrap 4 change the language/locale but nothing seems to work. I would like to set the locale to "de" but it stays at "en" no matter what.. Does anyboys know a solution?
<!DOCTYPE html>
<html lang="en">
<head>
<title id="doc_title">Ueberblick</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Cache-Control" content="must-revalidate">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment-with-locales.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
</head>
<body>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD.MM.YYYY',
locale: 'de',
todayHighlight: true,
maxDate: new Date(),
minDate: new Date("11/01/2020"),
useCurrent: false,
buttons: {showClear: true, showToday:true, showClose: true},
tooltips:{today: 'Gehe zu: Heute', clear:'Auswahl löschen', close:'Kalender schließen'},
});
});
</script>
</body>
The prolem was, that Tempus Dominus requires moment.js, which needs to be included before tempus dominus. When I added moment-with-locales.js I added it after Tempus Dominus, so it could not be found. After changing the inport to the correct order it worked. Also it was necessary to change moment-with-locales to the version 2.17.0.
<!DOCTYPE html>
<html lang="en">
<head>
<title id="doc_title">Ueberblick</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta http-equiv="Cache-Control" content="must-revalidate">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
</head>
<body>
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker4" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD.MM.YYYY',
locale: 'de',
todayHighlight: true,
maxDate: new Date(),
minDate: new Date("11/01/2020"),
useCurrent: false,
buttons: {showClear: true, showToday:true, showClose: true},
tooltips:{today: 'Gehe zu: Heute', clear:'Auswahl löschen', close:'Kalender schließen'},
});
});
</script>
</body>
I am trying to use the bootstrap datetime picker. The input box with the glyphicon is displayed; however, no calendar appears when I click in the input and manually entering the date does not result in it being formatted. I have copied this from sample code and spent a lot of time ensuring I have the libraries required.
This is displayed:
The HTML and js is:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="resources/jquery/jquery.js"></script>
<script src="resources/jquery/jquery.min.js"></script>
<script src="resources/jquery/jquery.validate.js"></script>
<script src="resources/jquery/jquery.validate.min.js"></script>
<script src="resources/jquery/additional-methods.js"></script>
<script src="resources/jquery/additional-methods.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="resources/jquery/moment-with-locales.js"></script>
<!-- Le styles -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet"/>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="resources/favicon.png">
</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>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-transition.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-alert.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-modal.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-dropdown.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-scrollspy.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tab.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-button.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-collapse.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-carousel.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-typeahead.js"></script>
<script src="js/groupSummary-ajax.js"></script>
</body>
I know it is frowned upon to have the script with the HTML and will separate when working.
Try to swap the order of loading datetimepicker and moment.js, so that moment.js is loaded first
<script src="resources/jquery/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
Edit
As your code examples has some local resources which we can not check, here is a simple working example with external resources only:
<!DOCTYPE html>
<html>
<head>
<title>Cub Award Overview</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A Scout award tracking application">
<meta name="author" content="Glyndwr (Wirrin) Bartlett">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.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>
</html>
You maybe want to try to adapt that. If it doesn't work inside your code, try to check for errors on the console. Another try would be to implement my code, comment out all of your initial includes and un-comment them step by step to find the source of evil.
Checked your code and it seems like you have not included the moment.js file first before jquery library and bootstrap js file. Also you have not included the moment.js file in your code. Please try as mentioned below
Ex :
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<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/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
Another thing I noticed is, you didn't provided an id to the input field. Try to provide an id to input field and use in jquery
Ex :
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" id="datetimepicker1" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
Now in script
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
Its worked for me and hope it works for you.
I have created a web page with a JavaScript datetimepicker but it is not working due to another jQuery version being called to the page for another purpose. How would I make datetimepicker or datepicker work with any version of JavaScript?
$(function() {
$("#datepicker").datepicker();
});
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="style/bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="style/qweerwer.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
var jQuery_3_1_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
var jQuery_1_11_1 = $.noConflict(true);
</script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<label class="control-label"> Event Date </label>
<div class="form-group ">
<input style='max-width: 250px;' readonly="" name="eventdate" placeholder="Event Date" id="datepicker" class="form-control">
</div>
You are missing reference to jQuery UI library, where datepicker function is defined. Add this line to your HTML.
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Use the following js library and css:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I´m using a Bootstrap 3 date AND time picker linked here:
DateTime Picker for Bootstrap 3
I can´t make the picking window open. When you click on the textbox, nothing happens and no messages are shown on browser Console (Chrome). So, in truth, the control is working as a simple textbox, not as a DateTime picker.
Here is my code:
_Layout file included in all views:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>TestApp</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/favicon.ico" type="image/ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" media="screen">
<link href="#Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" media="screen">
<link href="#Url.Content("~/Content/CustomNavBar.css")" rel="stylesheet" media="screen">
</head>
<body>
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<.... some other stuff here...>
Index.cshtml used on that page:
<link href="#Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" media="screen" type="text">
<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="col-md-10">
<div class='well'>
<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>
I appreciate any help to make this work...
Thanks for any help...
Your layout can be cleaned up a bit, since MVC4 no longer requires #Url.Content() for virtual paths. You probably also want to look into how the bundling system works. For certain, what you're trying to do will probably work better with sections:
_Layout.cshtml:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TestApp</title>
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="~/favicon.ico" type="image/ico" />
<link href="~/Content/bootstrap.css" rel="stylesheet" media="screen" />
<link href="~/Content/bootstrap-theme.min.css" rel="stylesheet" media="screen" />
<link href="~/Content/CustomNavBar.css" rel="stylesheet" media="screen" />
#RenderSection("head", required: false)
</head>
<body>
#RenderBody()
<script src="~/Scripts/jquery-2.0.3.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Index.cshtml:
#section head
{
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen" type="text" />
}
#section scripts
{
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
<div class="container">
<div class="col-md-10">
<div class='well'>
<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>
</div>
</div>
Using sections lets the view engine inject things like <script> or <link /> tags into the correct parts of the layout. Anything not in a section is injected wherever #RenderBody() occurs in the layout.
If you want a more concrete example, go straight to the source: http://weblogs.asp.net/scottgu/archive/2010/12/30/asp-net-mvc-3-layouts-and-sections-with-razor.aspx
In this two scripts of your Index.cshtml.
<script type="text/javascript" src="~/Scripts/moment.min.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datetimepicker.min.js"></script>
You didn't use #UrlContent(). Run your project, and look in the generated html source code, if the browser can find this js files. Or look any error in the Network tab of your browser developer tools.