<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="Js/bootstrap-datetimepicker.min.js"></script>
<script src="Js/bootstrap-datetimepicker.he.js"></script>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
why this is not working:
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY'
});
datetimepicker is not a function jquery
What is the right arrangement that will work?
You can get the bootstrap datetimepicker from here.
$(function () {
$('#dtpickerdemo').datetimepicker();
});
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
/>
<link
href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css"
rel="stylesheet"
/>
<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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="form-group">
<label for="dtpickerdemo" class="col-sm-2 control-label"
>Select date/time:</label
>
<div class="col-sm-4 input-group date">
<input type="text" class="form-control" id="dtpickerdemo" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I have some fields in my database that contain strings that produce html i.e. "<p'>Hello world</p'>".
I'm trying to bring these through to a summernote rich text editor so they can be edited from there.
I've tried
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="form-group row">
<label asp-for="MainText" class="col-sm-2 col-form-label text-right"></label>
<div class="col-sm-10">
<div asp-for="MainText" id="summernote"></div>
<span asp-validation-for="MainText" class="text-danger"></span>
</div>
</div>
<script>
$(document).ready(function () {
$('#summernote').summernote();
});
</script>
</body>
</html>
and that isn't working. Does anyone have any suggestions on how I can approach this?
Okay! Update because I'm a dumbass.
The documentation I read said that I needed to use a div to put the summernote id attribute in, however it turns out you can also use a text area, as displayed below. This is working fine now.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.js"></script>
</head>
<body>
<div class="form-group row">
<label asp-for="MainText" class="col-sm-2 col-form-label text-right"></label>
<div class="col-sm-10">
<textarea asp-for="MainText" id="summernote"></textarea>
<span asp-validation-for="MainText" class="text-danger"></span>
</div>
</div>
<script>
$(document).ready(function () {
$('#summernote').summernote();
});
</script>
</body>
</html>
I am new to html with js .I try to use a datepicker, but it doesn't work.
I have this error : $(...).datepicker is not a function in console
I use many frameworks and librairy (bootstrap, datapicker). And I think that there is a conflicts between they.please advice me in code.
js page :
$(document).ready(function() {
// dateevent
$(".datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
// time of event
$('.datefrom').datetimepicker({
format: 'LT'
});
$('.dateto').datetimepicker({
format: 'LT'
});
//geteventbyid
if (sessionStorage.getItem('editeventid')!=0) {
geteventbyid();
}
});
//time
</script>
Libraries I'm using and their placing:
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
html page :
<!-- Start Main -->
<section id="main">
<div id="page">
<div class="row-container light bg-scroll" style="">
<div class="row">
<form method="post">
<div class="col-sm-4"></div>
<div class="form-group">
<div class='col-sm-4'>
<label>Select Date: </label>
<input class="form-control datepicker" type="text" id="eventdate" style="width: 220px" />
</div>
</div>
</form>
<div class="col-sm-4"></div>
</div>
</div>
Better add jquery.js plugin in top of script. Because bootstrap also need jquery support
$(document).ready(function() {
// dateevent
$(".datepicker").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker('update', new Date());
// time of event
$('.datefrom').datetimepicker({
format: 'LT'
});
$('.dateto').datetimepicker({
format: 'LT'
});
//geteventbyid
// if (sessionStorage.getItem('editeventid') != 0) {
// geteventbyid();
//}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> html page :
<!-- Start Main -->
<section id="main">
<div id="page">
<div class="row-container light bg-scroll" style="">
<div class="row">
<form method="post">
<div class="col-sm-4"></div>
<div class="form-group">
<div class='col-sm-4'>
<label>Select Date: </label>
<input class="form-control datepicker" type="text" id="eventdate" style="width: 220px" />
</div>
</div>
</form>
<div class="col-sm-4"></div>
</div>
</div>
I am trying to add a datepicker to one of my form fields, but it simply won't appear. When I hover over the icon, the hand button comes up as if it is clickable, but when I click it, nothing happens. Here is my code:
<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" />
#using (Html.BeginForm("Index", "Engagement", FormMethod.Get, new { #class = "form-inline" }))
{
<div class="form-group">
<label for="end">Start date:</label><br />
<div class='input-group date' id='StartDateFilter'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#StartDateFilter').datetimepicker({
locale: 'en-GB'
});
});
</script>
}
jurfer i think ,the script order was incorrect. Here is the code which works
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='dt1'>
<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">
$('#dt1').datetimepicker({
locale: 'en-GB'
});
</script>
</div>
</div>
Hi I have the HTML page where I have input field for date picker but that date picker is not working.Below is my code.
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../CSS/Final_Pages/CSS/tableStyle.css" rel="stylesheet" />
<link href="../CSS/tableStyleResponsive.css" rel="stylesheet" />
<link href="../CSS/Custom_style.css" rel="stylesheet" />
<link href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div data-role="page">
<form name="Basicinfo" id="Basicinfo" method="post" action="%bind(:11)">
<div role="main" class="ui-content">
<!-- Other Information Field Starts-->
<div data-role="fieldcontain">
<label id="doblbl">Date Of Birth:</label>
<input type="text" id="dob" name="dob" value="" data-role="date" />
</div>
</div>
</form>
</div>
</body>
</html>
Try take a look at this:
Not sure if its is what your looking for
<div id="indexPage" data-role="page">
<input type="date" id="date_val" data-role="datebox" style="margin-top: 10px" data-options='{"mode": "calbox", "useNewStyle":true,"useFocus": true}'>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src=" http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.datebox.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
https://i.stack.imgur.com/vK4OB.png
Currently my display is like this.
I have a master page which I am using to import my css and js.
<link href="assets/css/datepicker.css" rel=Stylesheet />
<link href="assets/css/bootstrap-responsive.css" rel=Stylesheet />
<link href="assets/css/bootstrap.css" rel=Stylesheet />
<link href="assets/css/docs.css" rel=Stylesheet />
<link href="assets/less/bootstrap.less" type="text/css" rel="Stylesheet/less" />
In head and for the javascript:
<script src="assets/js/less-1.3.0.min.js" type="text/jscript"></script>
<script src="assets/js/jquery.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-transition.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-alert.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-modal.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-dropdown.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-scrollspy.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-tab.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-tooltip.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-popover.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-button.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-collapse.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-carousel.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-datepicker.js" type="text/jscript"></script>
<script src="assets/js/bootstrap-typeahead.js" type="text/jscript"></script>
<script>
$('#datepicker').datepicker();
</script>
The control:
<div class="input-append date" id="datepicker" data-date="12-02-2012"
data-date-format="dd-mm-yyyy">
<input size="16" type="text" value="12-02-2012" readonly>
<span class="add-on"><i class="icon-th"></i></span> </div>
Want the days to go horizontal as they should be, not sure what i'm missing?
I think this what you need DEMO
HTML:
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
Script:
$('#dp3').datepicker();
var startDate = new Date(2012,1,20);
var endDate = new Date(2012,1,25);