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
Related
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/
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();
});
I'm a newbie.
While im working on datepicker, somehow it is not working properly on IE.
Please check the below image
and here is the code:
function pageLoad() {
$(function () {
$("#textBox").datepicker({
showOn: "button",
buttonImage: "someImageUrl",
buttonImageOnly: true,
dateFormat: "M dd,yy",
buttonText: "Select date"
})
});
$("#textBox").val(defaultDate);
}
here are the versions of JQuery
<script src="//code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js" type="text/javascript"></script>
Sorry here are the CSS:
<link id="lnkStyleSheet" runat="server" rel="stylesheet" href="../CSS/StyleSheet.css" type="text/css" />
You need to include the CSS and images that come with jQuery UI.
<link rel="stylesheet" href="jquery-ui.min.css">
See the "Basic Overview: Using jQuery UI on a Web Page" section here: http://learn.jquery.com/jquery-ui/getting-started/
You could roll your own theme and use those files
http://jqueryui.com/themeroller/
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
Just add it in your HTML head before code
I am using jquery 1.10.2 to include a slider on my website, but for some reason it is not showing up. Please help!
Here is my code:
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script src="js/jquery-1.10.2.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<script>
$(document).ready(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
Why is it not showing up? Code seems to be correct.
The JQUERY UI library also requires the standard JQUERY Library.
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>