set "NULL" into jqxDateTimeInput - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, calendar, date, datetimeinput, jqxdatetimeinput, null, today, value

This topic contains 7 replies, has 4 voices, and was last updated by Kelvin 10 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

set "NULL" into jqxDateTimeInput Posts
November 13, 2013 at 12:49 pm set "NULL" into jqxDateTimeInput #32568

mallepaddi
Participant

HI

I have set NULL into DateTimeInput field, user should select data for search purpose, so intially field should be EMPTY.

When i set NULL, field appeas EMPTY, but user not able to select currect data for first time.

Step 1: Click on Calendar button then not able to select currect date, works for other dates.
Step2: Close field by clicking on Calendar button, but next time user can able to select currect date, but not forst date.

$(“#draftOrderFromDate”).jqxDateTimeInput({ closeCalendarAfterSelection:true, width: ’90px’, height: ’20px’, theme: theme });
$(“#draftOrderToDate”).jqxDateTimeInput({ closeCalendarAfterSelection:true, width: ’90px’, height: ’20px’, theme: theme });

$(‘#draftOrderFromDate’).jqxDateTimeInput({ value: null});
$(‘#draftOrderToDate’).jqxDateTimeInput({ value: null});

$(‘#draftOrderFromDate’).on(‘valuechanged’, function (event) {
var jsDate = event.args.date;
$(“#draftOrderToDate”).jqxDateTimeInput(‘setMinDate’, jsDate);
});

Thanks

November 14, 2013 at 11:36 am set "NULL" into jqxDateTimeInput #32627
Dimitar
Participant
Hello mallepaddi,

This issue does not occur in the latest version of jQWidgets (3.0.4). Here is the example we tested:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxWidget").jqxDateTimeInput({ width: '300px', height: '25px', closeCalendarAfterSelection: true });
                $("#jqxWidget").jqxDateTimeInput({ value: null });
            });
        </script>
        <div id='jqxWidget'>
        </div>
    </div>
</body>
</html>
```
Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/
November 17, 2013 at 3:28 am set "NULL" into jqxDateTimeInput #32794

mallepaddi
Participant

Hi

below code doesn’t work and user not able to select current date for the first time, when we set date to null.

Draft Order No

Draft Date

SEARCH
RESET

$(“#draftOrderNo”).jqxInput({ width: ‘200px’, height: ’20px’ , theme: theme});
$(“#draftOrderFromDate”).jqxDateTimeInput({ closeCalendarAfterSelection:true, width: ’90px’, height: ’20px’, theme: theme });
$(“#draftOrderToDate”).jqxDateTimeInput({ closeCalendarAfterSelection:true, width: ’90px’, height: ’20px’, theme: theme });

$(‘#draftOrderFromDate’).jqxDateTimeInput({ value: null});
$(‘#draftOrderToDate’).jqxDateTimeInput({ value: null});

$(‘#draftOrderFromDate’).on(‘valuechanged’, function (event) {
var jsDate = event.args.date;
$(“#draftOrderToDate”).jqxDateTimeInput(‘setMinDate’, jsDate);
});

Thanks

November 17, 2013 at 5:52 am set "NULL" into jqxDateTimeInput #32797

mallepaddi
Participant

Hi

In above case, date picker showing “current” date as “selected” (turned into grey color) and not allowing user to select the same again.

Thanks

November 17, 2013 at 6:04 am set "NULL" into jqxDateTimeInput #32798

mallepaddi
Participant

Hi

Found culprit, because of i have set … .jqx-grid { border-width:0px;} , commenting this css works as expected.

Thanks

December 26, 2013 at 1:46 pm set "NULL" into jqxDateTimeInput #46977

Kelvin
Participant

Hi,
I have a problem when using knockout binding with initial NULL value set on both datatimeinput control.
The second datetimeinput control allow me to select today’s date from the calendar control but the first datetimeinput control not allow me to select today’s date unless I click the calendar button and then come off it, then it will allow me to select today’s date.
Many thanks for your help.

<!DOCTYPE html>
<html lang=”en”>
<head>
<link rel=”stylesheet” href=”../Controls/jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../Controls/jqwidgets/styles/jqx.bootstrap.css” type=”text/css” />
<script type=”text/javascript” src=”../Scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”../Scripts/knockout-3.0.0.js”></script>
<script type=”text/javascript” src=”../Controls/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../Controls/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../Controls/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../Controls/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”../Controls/jqwidgets/jqxknockout.js”></script>
<script type=”text/javascript” src=”../Controls/jqwidgets/globalization/globalize.js”></script>
</head>
<body>
<div id=’content’>

<p>
first:
<div id=’d1′ data-bind=”jqxDateTimeInput: {value: dateOfBirthStart, width: ‘110px’, height: ’25’}”>
</div>
</p>

<p>
second:
<div id=’d2′ data-bind=”jqxDateTimeInput: {value: dateOfBirthEnd, width: ‘110px’, height: ’25’}”>
</div>
</p>

<script type=”text/javascript”>
$(document).ready(function () {
var myViewModel = function () {
var self = this;
self.dateOfBirthStart = ko.observable(null);
self.dateOfBirthEnd = ko.observable(null);
};

var viewModel = new myViewModel();

ko.applyBindings(viewModel);

//$(“#jqxWidget”).jqxDateTimeInput({ width: ‘300px’, height: ’25px’, closeCalendarAfterSelection: true, theme: ‘bootstrap’ });
//$(“#jqxWidget”).jqxDateTimeInput({ value: null });

//$(“#jqxWidget2”).jqxDateTimeInput({ width: ‘300px’, height: ’25px’, closeCalendarAfterSelection: true, theme: ‘bootstrap’ });
//$(“#jqxWidget2”).jqxDateTimeInput({ value: null });
});
</script>
</div>
</body>
</html>

December 27, 2013 at 8:31 am set "NULL" into jqxDateTimeInput #46994

Peter Stoev
Keymaster

Hi Kelvin,

On my side, while testing with jQWidgets ver. 3.1.0, I can select the Today’s Date on both DateTimeInputs.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

December 29, 2013 at 7:09 pm set "NULL" into jqxDateTimeInput #47058

Kelvin
Participant

Thanks for your help.

I was using 3.0.4 and after changed to 3.1.0 everything work as expected.
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.