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
Related
I am working with select2 library, and have a big problem. I start to use bootstrap, and for some reason select2 is not working properly ex:
As you can see it doesn't want to open, after opening, it selects all items on mouseover, and it is not possible to close.
Code in jsFidldle.
My code:
$(document).ready(function () {
$('select.form-control').select2({
dropdownParent: $(this).find('.modal-body'),
theme: 'bootstrap',
});
});
Library which i use:
<link href="~/lib/bootstrap-5/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/js/Library/Select2/select2.min.css" rel="stylesheet" />
<link href="~/js/Library/Select2/select2-bootstrap.css" rel="stylesheet" />
<script src="~/js/Library/Select2/bootstrap.bundle.min.js"></script>
<script src="~/js/Library/Select2/select2.full.js"></script>
<script src="~/js/Library/select2.min.js"></script>
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 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 am new to Jquery. I am designing a web application. On one of the pages, in the form fields, there is a date field which I would like the user to fill using a date drop down menu. How can I include a drop down date menu using Jquery or JS?
Well there is a Jquery datepicker, for the same. You need to add Jquery reference in your application and then use the code like this:
function bindPicker() {
$("input[type=text][id*=Date]").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-100:+1", //Year range, 1 indicates one year ahead from current
showOn: "both",
buttonImage: "../../images/Calender.png", //path of image you want to attach
buttonImageOnly: true,
dateFormat: "dd-M-yy" //this is the format of date
});
}
The textbox on which this will be implemented must have Date as suffix in the ID.
As the code is written like:
input[type=text][id*=Date]
There are a few options out there, but one of the most recommended options will be to use the jQuery Datepicker.
Here is a demo implementing one use case... click here to view it
The following code is pull from the jQuery Datepicker site I linked below
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
});
Here are some reference sites as well
Usage Demos
Datepicker api
Simple webform.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
yearRange: "-100:+20",
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<form id="webform" runat="server">
<div>
<input id="datepicker" name="datepicker" type="Text" />
</div>
</form>
</body>
</html>
refer this link for more information
It will be helpful to you.
check it out this one:
http://jqueryui.com/datepicker/
it will help you
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Referenced from here
http://jqueryui.com/datepicker/
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