jQWidgets Forums

Tagged: datetimeinput, jqxwidget

This topic contains 11 replies, has 2 voices, and was last updated by chupalimbo 11 years, 11 months ago.

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

Author

Use two datetimeinput in the same page Posts

April 16, 2013 at 1:24 pm Use two datetimeinput in the same page #19363

chupalimbo

Member

hi,

I want to use two datetimeinput in the same page but i have an error : event is not defined

Here is my jquery code :
—————————————————————————————————————————————————–

// 1er datePicker de la page licence
	$("#jqxdatetimeinput_licence_1").jqxDateTimeInput({ 
		width: '150px', 
		height: '25px', 
		theme: 'metro',
		formatString: "dd.MM.yyyy",
		animationType: 'fade',
		readonly: true,
		culture: 'fr-FR'
	});
      	
      	$('#jqxdatetimeinput_licence_1').on('change', function (event){ 
		var date = $('#jqxdatetimeinput_licence_1').jqxDateTimeInput('getText');
 		$("#purchaseDate").val(date);
	});
		
	// Définit la date s'il s'agit d'une édition
	var purchaseDate = ($('#purchaseDate').val());
		
	if(purchaseDate != "" &amp;&amp; purchaseDate != null){
			
		var aPurchaseDate = purchaseDate.split("."); 
			
		var iDay = (parseInt(aPurchaseDate[0]));
		var iMonth = (parseInt(aPurchaseDate[1])-1);
		var iYear = (parseInt(aPurchaseDate[2]));
			
		$("#jqxdatetimeinput_licence_1").jqxDateTimeInput({ value: new Date(iYear,iMonth,iDay)});
	}
		
	// 2er datePicker de la page licence
	$("#jqxdatetimeinput_licence_2").jqxDateTimeInput({ 
		width: '150px', 
		height: '25px', 
		theme: 'metro',
		formatString: "dd.MM.yyyy",
		animationType: 'fade',
		readonly: true,
		culture: 'fr-FR'
	});
      	
      	$('#jqxdatetimeinput_licence_2').on('change', function (event){ 
		var date2 = $('#jqxdatetimeinput_licence_2').jqxDateTimeInput('getText');
 		$("#expireDate").val(date2);
	});
		
	// Définit la date s'il s'agit d'une édition
	var expireDate = ($('#expireDate').val());
		
	if(expireDate != "" &amp;&amp; expireDate != null){
			
		var aExpireDate = expireDate.split("."); 
			
		var iDay = (parseInt(aExpireDate[0]));
		var iMonth = (parseInt(aExpireDate[1])-1);
		var iYear = (parseInt(aExpireDate[2]));
			
		$("#jqxdatetimeinput_licence_2").jqxDateTimeInput({ value: new Date(iYear,iMonth,iDay)});
	}

—————————————————————————————————————————————————-

and here is my html code :
—————————————————————————————————————————————————-

<tr>
	<td>Date d'achat</td>
	<td><div id='jqxdatetimeinput_licence_1'></div>
	<input id='purchaseDate' type='text' name='purchaseDate' value='$iPurchaseDate'/></td>
</tr>
<tr>
	<td>Date d'expiration</td>
	<td><div id='jqxdatetimeinput_licence_2'></div>
	<input id='expireDate' type='text' name='expireDate' value='$iExpireDate'/></td>
</tr>

—————————————————————————————————————————————————-

thanks for your help

April 16, 2013 at 2:32 pm Use two datetimeinput in the same page #19372

chupalimbo

Member

April 17, 2013 at 5:46 am Use two datetimeinput in the same page #19402

Peter Stoev

Keymaster

Hi,

There is no problem to add multiple jqxDateTimeInput instances on one page. As you use French Culture, make sure that you have included the French culture:

     <script type="text/javascript" src="../../jqwidgets/globalization/globalize.culture.fr-FR.js"></script>

Best Regards,
Peter Stoev

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

April 17, 2013 at 7:30 am Use two datetimeinput in the same page #19406

chupalimbo

Member

Hi peter,

Sorry but it’s not that.

The first datetimeinput work but the second don’t appear.

thanks for your help

April 17, 2013 at 7:51 am Use two datetimeinput in the same page #19410

Peter Stoev

Keymaster

Hi,

With the provided code and jQWidgets 2.8.1 it works as expected.

Here is a working sample:


<!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>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.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 () {
                $("#jqxdatetimeinput_licence_1").jqxDateTimeInput({
                    width: '150px',
                    height: '25px',
                    theme: 'metro',
                    formatString: "dd.MM.yyyy",
                    animationType: 'fade',
                    readonly: true,
                    culture: 'fr-FR'
                });
                $('#jqxdatetimeinput_licence_1').on('change', function (event) {
                    var date = $('#jqxdatetimeinput_licence_1').jqxDateTimeInput('getText');
                    $("#purchaseDate").val(date);
                });
                // Définit la date s'il s'agit d'une édition
                var purchaseDate = ($('#purchaseDate').val());
                if (purchaseDate != "" && purchaseDate != null) {
                    var aPurchaseDate = purchaseDate.split(".");
                    var iDay = (parseInt(aPurchaseDate[0]));
                    var iMonth = (parseInt(aPurchaseDate[1]) - 1);
                    var iYear = (parseInt(aPurchaseDate[2]));
                    $("#jqxdatetimeinput_licence_1").jqxDateTimeInput({ value: new Date(iYear, iMonth, iDay) });
                }
                // 2er datePicker de la page licence
                $("#jqxdatetimeinput_licence_2").jqxDateTimeInput({
                    width: '150px',
                    height: '25px',
                    theme: 'metro',
                    formatString: "dd.MM.yyyy",
                    animationType: 'fade',
                    readonly: true,
                    culture: 'fr-FR'
                });
                $('#jqxdatetimeinput_licence_2').on('change', function (event) {
                    var date2 = $('#jqxdatetimeinput_licence_2').jqxDateTimeInput('getText');
                    $("#expireDate").val(date2);
                });
                // Définit la date s'il s'agit d'une édition
                var expireDate = ($('#expireDate').val());
                if (expireDate != "" && expireDate != null) {
                    var aExpireDate = expireDate.split(".");
                    var iDay = (parseInt(aExpireDate[0]));
                    var iMonth = (parseInt(aExpireDate[1]) - 1);
                    var iYear = (parseInt(aExpireDate[2]));
                    $("#jqxdatetimeinput_licence_2").jqxDateTimeInput({ value: new Date(iYear, iMonth, iDay) });
                }
            });
        </script>
        <div id='jqxWidget'>
            <table>
                <tr>
                    <td>Date d'achat</td>
                    <td>
                        <div id='jqxdatetimeinput_licence_1'></div>
                        <input id='purchaseDate' type='text' name='purchaseDate' value='$iPurchaseDate' /></td>
                </tr>
                <tr>
                    <td>Date d'expiration</td>
                    <td>
                        <div id='jqxdatetimeinput_licence_2'></div>
                        <input id='expireDate' type='text' name='expireDate' value='$iExpireDate' /></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

April 17, 2013 at 8:49 am Use two datetimeinput in the same page #19413

chupalimbo

Member

Hi peter,

Yes if is an add, it works. But, if the value is set, it doesn’t work.

Same error, the first input change right and the second input doesn’t appear.

you can see my error, if you set inputs like that : value=’11.04.2013′

thanks for your help

April 17, 2013 at 9:15 am Use two datetimeinput in the same page #19419

Peter Stoev

Keymaster

Hi,

Did you try the posted code? I am able to see 2 jqxDateTimeInput instance and I am also able to change their values successfully. The version that I use for testing is jQWidgets 2.8.1.

Best Regards,
Peter Stoev

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

April 17, 2013 at 9:50 am Use two datetimeinput in the same page #19426

chupalimbo

Member

Hi peter,

that the code i put in a page test:

<!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>
    <link rel="stylesheet" href="../shared_libs/jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../shared_libs/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/scripts/gettheme.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/jqwidgets/globalization/globalize.culture.fr-FR.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxdatetimeinput_licence_1").jqxDateTimeInput({
                    width: '150px',
                    height: '25px',
                    formatString: "dd.MM.yyyy",
                    animationType: 'fade',
                    readonly: true,
                    culture: 'fr-FR'
                });
                $('#jqxdatetimeinput_licence_1').on('change', function (event) {
                    var date = $('#jqxdatetimeinput_licence_1').jqxDateTimeInput('getText');
                    $("#purchaseDate").val(date);
                });
                // Définit la date s'il s'agit d'une édition
                var purchaseDate = ($('#purchaseDate').val());
                if (purchaseDate != "" && purchaseDate != null) {
                    var aPurchaseDate = purchaseDate.split(".");
                    var iDay = (parseInt(aPurchaseDate[0]));
                    var iMonth = (parseInt(aPurchaseDate[1]) - 1);
                    var iYear = (parseInt(aPurchaseDate[2]));
                    $("#jqxdatetimeinput_licence_1").jqxDateTimeInput({ value: new Date(iYear, iMonth, iDay) });
                }
                // 2er datePicker de la page licence
                $("#jqxdatetimeinput_licence_2").jqxDateTimeInput({
                    width: '150px',
                    height: '25px',
                    formatString: "dd.MM.yyyy",
                    animationType: 'fade',
                    readonly: true,
                    culture: 'fr-FR'
                });
                $('#jqxdatetimeinput_licence_2').on('change', function (event) {
                    var date2 = $('#jqxdatetimeinput_licence_2').jqxDateTimeInput('getText');
                    $("#expireDate").val(date2);
                });
                // Définit la date s'il s'agit d'une édition
                var expireDate = ($('#expireDate').val());
                if (expireDate != "" && expireDate != null) {
                    var aExpireDate = expireDate.split(".");
                    var iDay = (parseInt(aExpireDate[0]));
                    var iMonth = (parseInt(aExpireDate[1]) - 1);
                    var iYear = (parseInt(aExpireDate[2]));
                    $("#jqxdatetimeinput_licence_2").jqxDateTimeInput({ value: new Date(iYear, iMonth, iDay) });
                }
            });
        </script>
        <div id='jqxWidget'>
            <table>
                <tr>
                    <td>Date d'achat</td>
                    <td>
                        <div id='jqxdatetimeinput_licence_1'></div>
                        <input id='purchaseDate' type='text' name='purchaseDate' value='11.04.2013' /></td>
                </tr>
                <tr>
                    <td>Date d'expiration</td>
                    <td>
                        <div id='jqxdatetimeinput_licence_2'></div>
                        <input id='expireDate' type='text' name='expireDate' value='11.04.2013' /></td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>

I use Jqxwidget 2.8.0 and jquery 1.8.2, but i have the same error.

thanks for your help

April 17, 2013 at 10:16 am Use two datetimeinput in the same page #19428

Peter Stoev

Keymaster

The current version is 2.8.1. Please try the posted code with it as there could be an issue in the old version which we have already fixed. At least, I am unable to reproduce your issue with the new version.

Best Regards,
Peter Stoev

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

April 17, 2013 at 11:16 am Use two datetimeinput in the same page #19432

chupalimbo

Member

Hi,

I tried with the current version of jquery and jqxwidget (1.9.0 and 2.8.1) but i have the same error. :'(

<link rel="stylesheet" href="../shared_libs/jqwidgets281/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../shared_libs/jQuery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets/scripts281/gettheme.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets281/jqxcore.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets281/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets281/jqxcalendar.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets281/jqxtooltip.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets281/globalization/globalize.js"></script>
    <script type="text/javascript" src="../shared_libs/jqwidgets281/globalization/globalize.culture.fr-FR.js"></script>

thanks for your help

April 17, 2013 at 11:36 am Use two datetimeinput in the same page #19434

Peter Stoev

Keymaster

Hi,

I am not sure what could be the issue on your side. Could you let me know which browser you use so I can test the code with it?

In addition, let’s try a different approach for setting a Date in jqxDateTimeInput:

    $("#jqxdatetimeinput_licence_1").jqxDateTimeInput({
        width: '150px',
        height: '25px',
        formatString: "dd.MM.yyyy",
        animationType: 'fade',
        readonly: true,
        culture: 'fr-FR'
    });
    $('#jqxdatetimeinput_licence_1').on('change', function (event) {
        var date = $('#jqxdatetimeinput_licence_1').jqxDateTimeInput('getText');
        $("#purchaseDate").val(date);
    });
    // Définit la date s'il s'agit d'une édition
    var purchaseDate = ($('#purchaseDate').val());
    if (purchaseDate != "" && purchaseDate != null) {
        var aPurchaseDate = purchaseDate.split(".");
        var iDay = (parseInt(aPurchaseDate[0]));
        var iMonth = (parseInt(aPurchaseDate[1]) - 1);
        var iYear = (parseInt(aPurchaseDate[2]));
        $("#jqxdatetimeinput_licence_1").jqxDateTimeInput('setDate', new Date(iYear, iMonth, iDay));
    }
    // 2er datePicker de la page licence
    $("#jqxdatetimeinput_licence_2").jqxDateTimeInput({
        width: '150px',
        height: '25px',
        formatString: "dd.MM.yyyy",
        animationType: 'fade',
        readonly: true,
        culture: 'fr-FR'
    });
    $('#jqxdatetimeinput_licence_2').on('change', function (event) {
        var date2 = $('#jqxdatetimeinput_licence_2').jqxDateTimeInput('getText');
        $("#expireDate").val(date2);
    });
    // Définit la date s'il s'agit d'une édition
    var expireDate = ($('#expireDate').val());
    if (expireDate != "" && expireDate != null) {
        var aExpireDate = expireDate.split(".");
        var iDay = (parseInt(aExpireDate[0]));
        var iMonth = (parseInt(aExpireDate[1]) - 1);
        var iYear = (parseInt(aExpireDate[2]));
        $("#jqxdatetimeinput_licence_2").jqxDateTimeInput('setDate', new Date(iYear, iMonth, iDay));  
    }

Best Regards,
Peter Stoev

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

April 17, 2013 at 11:52 am Use two datetimeinput in the same page #19435

chupalimbo

Member

hi,

yeeeah thanks a lot !

that’s work with :

$(“#jqxdatetimeinput_licence_1”).jqxDateTimeInput(‘setDate’, new Date(iYear, iMonth, iDay));

and not with :

$(“#jqxdatetimeinput_licence_1”).jqxDateTimeInput({ value: new Date(iYear, iMonth, iDay) });

thanks peter and have a great day !

Author

Posts

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

You must be logged in to reply to this topic.