POPUP calendar in ASP.net - javascript

so what I'm trying to do is to make a popup calendar by textbox by using datepicker. the problem that I faced is the calendar doesn't popup at all .
below is my code:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type ="text/javascript" >
// <script type="text/javascript" language="javascript">
$(function () {
//initialise the datepicker with the date format specified
$(".datepicker").datepicker();
</script>
next:
<input id="txtSche1" type="text" CssClass="datepicker" readonly="readonly"/>


so I try other method but but this time I'm using image button and it worked
$(function () {
$("[id$=txtSche1]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: '../images/PopUpSmallCalendar.gif',
});
});
I also remove the class from the text input
<input id="txtSche1" type="text" readonly="readonly"/>

Related

Japanese Date Picker Calender

Original Question
I have read jQuery Datepicker Japanese Calendar, jquery japanese datepicker,
https://jqueryui.com/datepicker/#localization and other sources but still cannot get my calender to display the days correctly.
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script src="i18n/datepicker-ja.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
} );
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker">
</p>
</body>
</html>
Update
I think there was a weird glitch with my Google Chrome, I had to go into settings and click 'Reset and clean up'. I talk about it more here.

You can include built-in support for languages like this :
/* Japanese initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
$.datepicker.regional['ja'] = {
closeText: '閉じる',
prevText: '<前',
nextText: '次>',
currentText: '今日',
monthNames: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
monthNamesShort: ['1月','2月','3月','4月','5月','6月',
'7月','8月','9月','10月','11月','12月'],
dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
dayNamesShort: ['日','月','火','水','木','金','土'],
dayNamesMin: ['日','月','火','水','木','金','土'],
weekHeader: '週',
dateFormat: 'yy/mm/dd',
firstDay: 0,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['ja']);
});
$( function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "ja" ] );
} );
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"> </script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Other solution, you can use the option to change the region of datepicker :
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", $.datepicker.regional["ja"])
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Date: <input id="datepicker" type="text">

Use the "option" to change the region of the datepicker to "ja" and add the following script with your jQuery and jQuery-UI script
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Here is a working example:
$(function() {
$("#datepicker").datepicker();
$("#datepicker").datepicker("option", $.datepicker.regional["ja"])
});
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
Date: <input id="datepicker" type="text">

Object doesn't support property or method 'dataTable'; even with jQuery included

I have searched for this error, in the context of jQuery and data tables, and none of the suggestions worked (in case this is marked duplicate immediately!)
I have .Net project (C#) and in master page I have references to jQuery, Datatables and date picker (among other things):
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-json/2.6.0/jquery.json.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.14.30/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link href="assets/themes/base/jquery.ui.all.css" rel="stylesheet" />
In a page that uses the the master page I have a datatable and date pciker. I also try to set the modal pop up's title to be draggable. Using any of them causes "Object does not support property or method xxxx" error, where xxxx can be "draggable", "dataTable" or "datepicker".
I can't see why I get the errors when I am referencing jQuery. I even tried the ".noConflict" approach but it did't help either.
<script>
function pageLoad() {
$('#tbStartDate').unbind();
$("#tbStartDate").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showOn: "button",
buttonImage: "../assets/images/calendar.gif",
buttonImageOnly: true,
buttonText: "Select Statrt Date",
option: "mm/dd/yy",
onSelect: function (dateStr) {
$("#tbEndDate").val(dateStr);
$("#tbEndDate").datepicker("option", { minDate: new Date(dateStr) })
}
});
}
</script>
or
<script>
$(document).ready(function () {
var j$ = jQuery.noConflict();
j$(".modal-dialog").draggable({
handle: ".modal-header"
});
})
</script>

Try...
$(window).load(function(){
})
instead of document.ready.

In the "Scripts" folder of the project, I had jquery-1.10.2.js and jquery-1.10.2.min.js while in my master page I was referencing jQuery 1.12.4. Once I removed the 1.10 scripts from"Scripts" folder, the error went away.
Thank you nitsram and Brahma for taking time and responding; I up-voted your responses.

Jquery Datepicker not working in bootstrap modal

In the below code i have a jquery datepicker.I tried to implement in bootstrap modal .But it is not working .Pls help me to solve the issue.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=txtdob]").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif'
});
});
</script>
<input type="text" style="width:30%" id="txtdob" name="nmdob" class="form-control" runat="server" placeholder="Dob" />

You have to call the function in the body onload() because on bootstrap, the elements are not initialized yet, so you cannot access the DOM.

change
$("[id$=txtdob]").datepicker({
to
$("#txtdob").datepicker({
and put it in $(document).ready...

How to apply validation on Datepicker through javascript

I have a date-picker in JavaScript as:-
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Now I want the user to select date which are less than today i.e. to select any dates which are previous or before from today.how to apply such validation on date?

Date picker has maxDate property which will enable us to set the maximum date. As per your requirement the date must be previous from today. Then it will be like this
$(function() {
$( "#datepicker" ).datepicker({ maxDate: -1 });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ maxDate: -1 });
});
</script>
<input type='text' id='datepicker'>

How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run?

How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function(){
$( "#datepicker" ).datepicker();
$("#icon").click(function() {
$("#datepicker").datepicker( "show" );
})
});
</script>
<!-- bxslider -->
<link href="bxslider/jquery.bxslider.css" rel="stylesheet" />
<script src="bxslider/jquery.js"></script>
<!-- bxSlider Javascript file -->
<script src="bxslider/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
});
});
</script>
How can the two will run?.If I put first the datepicker the bxslider will not run and if the bxslider I put first the datepicker wil not run..thanks..

You're including jQuery twice. Don't do that; including jQuery a second time will overwrite the jQuery object and any plugins that have been attached to it. Include jQuery only once and then include your plugins.

<head>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" />
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
$('.datepicker').datepicker({
showOn: 'button',
buttonImage: 'images/dp.png',
buttonImageOnly: true,
});
});
</script>
</body>

Categories

Resources