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();
});
Related
Following is the code that I am used to display full calendar view. But it is not working.
<html>
<head>
<link href="fullcalendar.css" rel="stylesheet" />
<link href="scheduler.css" rel="stylesheet" />
<script src="moment.js"></script>
<script src="jquery.js"></script>
<script src="fullcalendar.js"></script>
<script src="scheduler.js"></script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
You have to init fullcalendar in a script tag on the end of the body using
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
</script>
Also, are you sure the script and stylesheet files are on the same directory of your page?
You can find documentation on FullCalendar Docs
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/
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
I have a fiddle which displays date picker. same code i have written below but nothing happens, what wrong i am doing? When i click on that green colour then no date picker is generated, but in fiddle it is coming fine, where i am doing wrong?
http://jsfiddle.net/cBwEK/10/
<html>
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script>//mootools script
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
<input name='date_allow_empty' type='text' value='' class='date picker' />
<div id="invokeDP"></div>
<script type="text/javascript">
var dp = new DatePicker('.picker', {
pickerClass: 'datepicker ',
allowEmpty: true,
toggleElements: ['invokeDP']
});
</script>
</body>
</html>
EDIT: I have taken all scripts inside head section, previously these scripts were in body section
I think you miss a mootools core library.
<script src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
Here is my working solution http://jsbin.com/unosar/4/edit#source (click at Render button to preview)
Your CSS isn't being detected because you have your link in the body. If I remove the CSS from your fiddle, it doesn't display at all:
http://jsfiddle.net/cBwEK/11/
Try moving this to the head tag along with your script elements. I've also changed your comment block to the correct HTML syntax:
<head>
<script type="text/javascript" src="mootools-yui-compressed.js"></script><!-- mootools script -->
<script type="text/javascript" src="datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="datepicker.css" />
</head>
<body>
.......
Also, your class for the input is date picker. Looking at your mootools script, this should be datepicker.