I would like to insert a datetimepicker or just a timepicker using bootstrap on a form in my web project. Only the datepicker is working.
here is my code.
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/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.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#datepicker').datepicker();
});
</script>
<div class="form-group">
<label for="dateDebutGlacage">DateDebutGlacage</label>
<f:input class="form-control" path="dateDebutGlacage" id="datepicker" type="text" placeholder="DateDebutGlacage"></f:input>
That's because you are using jQueryUI's date picker which is only for dates and not for time.
You can look at this jQuery plugin that is built for that:
http://xdsoft.net/jqplugins/datetimepicker/
Related
I'm making todo web application. If i run only date picker code it will run but when I combine with other html code it doesn't work
It only displays
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!--datepicker-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ asset("css/todolist/datepicker.css") }}">
<input type="text" class="form-control" data-toggle="datepicker">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script href=" {{ asset('/js/todolist/datepicker.js') }}"}}></script>
<script>
$(function() {
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
zIndex: 2048,
});
});
</script>
When I click on input field field it should display date.
You're incorrectly importing the datepicker.js script. It should be src not href. It is also possible that you might have some errors in the syntax for your templating language, but I'm not sure what you're using so I can't be 100% confident about that. I think it needs to be like this,
<script src="{{asset('/js/todolist/datepicker.js')}}"></script>
But definitely it needs to be src and not href. If I reproduce your code and substitute the Github pages script from that repository, it works fine.
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
Definitely don't use the Github pages URL though--it shouldn't be used as a CDN. I'm just using it as an example that proves that your problem is with the way you're importing that script.
Your code contains syntax error - use src to import datepicker plugin.
<script src="{{ asset('/js/todolist/datepicker.js') }}"}}></script>
Here you can find workable example of your plugin (I used CDN instead of GitHub),
$(function() {
$('[data-toggle="datepicker"]').datepicker({
autoHide: true,
zIndex: 2048,
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#fengyuanchen/datepicker#0.6.5/dist/datepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#fengyuanchen/datepicker#0.6.5/dist/datepicker.min.css" rel="stylesheet">
<div clas="container">
<input type="text" class="form-control" data-toggle="datepicker">
</div>
I just use Theme Roller and download the theme I couldn't implement it
I have tried to import files, however while I add an input for date picker it is still only textbox... How to use this I only need "Datepicker" What am I doing wrong ?
Appreciate any help.
<html>
<head>
<script src="~/Content/jquery.js"></script>
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Content/jquery-ui.min.js"></script>
<link href="~/Content/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.theme.min.css" rel="stylesheet" />
<title>Test</title>
</head>
<body>
<div>
<input id="date" type="text" />
</div>
</body>
</html>
<script>
$(function() {
$('#date').datepicker();
});
</script>
These are enough to make the custom ThemeRoller work(and of course add the images)
<link href="~/jquery-ui.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Hope it will help to others who is seeking for jQuery UI Custom ThemeRoller Implementation.
I beginner in mvc Going to create application.I want to display datepicker in my application on textbox.I have written code in view .cshtml
<link href="~/Content/themes/base/minified/jquery.ui.datepicker.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"/>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function () {
$("#date").datepicker();
});
</script>
<h2>Index</h2>
<input type="text" id="date" />
When I click on textbox it is not working Please help if anyone have any idea about this.
In you bundleConfig.cs file first write **bundleTable.bundles.Usecdn = true**
after this add you CDN links into head section of layout.cshtml and after that
write this code in your head section of layout.cshtml
<script>
$(document).ready(function () {
$("#datepicker").datepicker();
});
</script>
here asign id = datepicker to the input where you want to show
Include jQuery UI in your script, add class="datepicker" where you want your datepicker to apear, and add this function:
$(function() {
$( ".datepicker" ).datepicker();
});
Following the link:
http://www.asp.net/ajaxlibrary/jquery_introduction.ashx
& then:
http://jquery.com/download/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DDownloading_jQuery%26redirect%3Dno
I have included the script files at the top of my page:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Then I have included the code for the datepicker:
<input type="text" id="simple-date" />
<script type="text/javascript" language="javascript">
// the jQuery ready shortcut
$(function () {
// set up our datepicker
$("#simple-date").datepicker();
});
</script>
but nothing happens when I click the text field....shouldnt a datepicker load?
Please advise.....thanks
I think you missed the jquery ui inclusion.
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
You forgot to add the jquery-ui plugin on your document
<script src="http//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
And have a look on themes too on the official site,I linked
Demo Fiddle
You should add both the CSS:
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="Stylesheet" />
and the JS for jQuery UI
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Can some please advise how I adjust this code to allow me to use a date picker on desktop and mobile version of my site.
I am using the query datepicker here http://jqueryui.com/datepicker/ but as my desktop and mobile sites are on the same page, i can't sue the id 'datepicker' twice so how can I adjust this code to allow me to also use m_datepicker then I can apply this to the mobile field?
JS
<link rel="stylesheet" href="http://www.paycoservices.co.uk/styles/datepicker.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Just apply it to two id's?:
$(function() {
$("#datepicker, #mobile-datepicker").datepicker();
});
Or, you can use the HTML5 datepicker, save you some pain:
<input type="date" name="bday">
http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience