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'>
Related
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">
$(function() {
$("#datepicker").datepicker({
maxDate: new Date()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link data-require="jqueryui#*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
<script data-require="jqueryui#*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker" /></p>
I have a jquery datepicker where I want the max date to be Sep 29'2017. Right now, it's today's date. Any help would be appreciated.
Thank you.
This will work
$(function() {
$("#datepicker").datepicker({
maxDate: new Date(2017, 8, 29) //you can provide any future date here
});
});
example:-
$( "#datepicker" ).datepicker({
maxDate: new Date(2017, 8, 29)
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="datepicker">
Here you go with a solution https://jsfiddle.net/5pct45bt/
$( "#datepicker" ).datepicker({
maxDate: new Date(2017, 8, 29)
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="datepicker">
You can also use +1D for adding 1day plus today.
Hope this will help you.
How would you change the date result format to be MM-DD-YY rather than MM/DD/YY in my code below?
<script>
$( function() {
$( "#input5" ).datepicker();
} );
</script>
I found this but I am not able to make it work with my code although I assume I am just doing something wrong :(
How to change date format (MM/DD/YY) to (YYYY-MM-DD) in date picker
As per the documentation, you should use this way:
$( function() {
$( "#datepicker" ).datepicker();
$( "#datepicker" ).datepicker( "option", "dateFormat", "mm-dd-yy" );
} );
You can use the Bootstrap Datepicker library and set the format to 'mm-dd-yy' like this format: 'mm-dd-yy'.
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
<script>
$( document ).ready(function() {
$("#from-datepicker").datepicker({
format: 'mm-dd-yy'
});
$("#from-datepicker").on("change", function () {
var fromdate = $(this).val();
alert(fromdate);
});
});
</script>
<input type="text" id="from-datepicker"/>
When I insert this script link in my index.php
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
It turns into this..
This is what it normaly look like and supposed to be look like
Here's the whole code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?php include ('title.php');?>
</title>
<link rel="icon" href="assets/img/LOGO.png">
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<link href="assets/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/resources/demos/style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
</head>
<body>
<div id="wrapper">
<?php
session_start();
include ("checkSession.php");
include ("nav.php");
include ("pagecontent.php");
?>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/plugins/metisMenu/metisMenu.min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery-1.3.2.min"></script>
<script>
$(document).ready(function(){
$('#listTable').DataTable();
});
</script>
<script>
$(document).ready(function(){
$('#print').DataTable({
"paging": false,
"filter": false,
"info": false
} );
});
</script>
<script language="javascript">
function Clickheretoprint()
{
var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=1000, height=400, left=100, top=25";
var content_vlue = document.getElementById("content").innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('</head><body onLoad="self.print()" style="width: 1500px; font-size:11px; font-family:arial; font-weight:normal;">');
docprint.document.write(content_vlue);
docprint.document.close();
docprint.focus();
}
</script>
<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>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</script>
</body>
</html>
Well If I remove the script link and put in the other source code, It doesn't work so I really need that script link to run the function :(
You've double (actually, triple) included jQuery.
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-1.3.2.min"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
It's likely some stuff in your jQuery 1.3.2-compatible code doesn't work in jQuery 1.10.2 (which as the last version loaded, overrides the others). Check your console for script errors.
You can use multiple versions of jQuery on a page using jQuery.noConflict but you'd really be better off solving the more fundamental issue.
I got it now, I just need to edit it into
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/jquery-ui.js"></script>
I believe it's because of the protocol used to access the CDN of jquery. Try this instead:
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
if that doesn't work, try with HTTPS:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
I am using date-time picker and datatable in my website.
The datatable don't work if I use date-time-picker at the same time. And if I delete the date-time-picker, the dataTable will work.
Please help me, I am not that good in customizing javascript code.
Here is my code:
<script type="text/javascript" src="http://api2.prodigy.co.id/plugins/jquery/jquery.js"></script>
<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui.css">
<link rel="stylesheet" href="plugins/jquery-ui/jquery-ui-timepicker-addon.css">
<script src="plugins/jquery-ui/jquery-ui.js"></script>
<script src="plugins/jquery-ui/jquery-ui-timepicker-addon.js"></script>
<script>
$(function() {
$( ".datepicker" ).datetimepicker({
dateFormat: "yy-mm-dd"
, timeFormat: "HH:mm:ss"
});
});
$(document).ready(function() {
$('#register_and_login').DataTable();
} );