jQuery UI Widgets › Forums › Editors › Calendar › Future date selection
Tagged: datetimeinput, jqxdatetimeinput, present date, setMinDate
This topic contains 6 replies, has 2 voices, and was last updated by Nadezhda 9 years, 10 months ago.
-
AuthorFuture date selection Posts
-
Hi i am having an issue in Calendar.
Here in the calendar all the future dates are disabled but able to do selection of future dates. I want to stop selection of future dates how can i perform this.
Regards,
YennamvinayHello Yennamvinay,
Here is an example which shows how to limit selection on future dates.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> </head> <body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // create jqxcalendar. $("#jqxWidget").jqxCalendar({ width: 220, height: 220 }); $("#jqxWidget").jqxCalendar('focus'); var today = $('#jqxWidget').jqxCalendar('getDate'); $('#jqxWidget').jqxCalendar('setMaxDate', today); }); </script> <div id='jqxWidget'> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Hi Yennamvinay,
It is better to use the following example.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> </head> <body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { // create jqxcalendar. $("#jqxWidget").jqxCalendar({ width: 220, height: 220, max: new Date()}); $('#jqxWidget').val(new Date(2014, 11, 30)); }); </script> <div id='jqxWidget'> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/Thanks for the reply.
But i am not able to select present day if i change once from present date to future date.
Hi Yennamvinay,
Please, provide us with more information about present day and future date, how do you want to select/unselect them?
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/I am using the below code:
$(“#jqxWidget”).jqxDateTimeInput({
width : ‘95%’,
value : new Date(),
formatString : “MM/dd/yyyy”
});$(“#jqxWidget”).jqxDateTimeInput(‘setMinDate’,new Date());
By default the date is shown as Today’s time in the text field. Now if i click calendar and select future date then at the same instance i am not able to select present date it becomes disabled.
The fix i need is even though i select future date i should able to select present date also.
Hi Yennamvinay,
Please, find the following example which shows how to select present date in jqxDateTimeInput.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script> </head> <body class='default'> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var date = new Date(); date.setHours(0); date.setMinutes(0); date.setSeconds(0); $("#jqxDateTimeInput").jqxDateTimeInput({ width: '95%', value: date, formatString: "MM/dd/yyyy", }); $('#jqxDateTimeInput').jqxDateTimeInput('setMinDate', date); }); </script> <div id='jqxDateTimeInput'> </div> </div> </body> </html>
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.