Wednesday, 23 September 2015

Jquery Date picker for all devices( desktop,Android, Note Pad,Ios devices),radiobutton lick events

Date picker for all devices


======================================================================
<html>

<head>

<meta charset="UTF-8" />

<title>datepicker-i</title>

<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />

<meta name="viewport" content="width=200, user-scalable=no" />

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>

<script type="text/javascript">

$(function () {

$("#date").datepicker({

defaultDate: "+1w",

showAnim: false,

maxDate: "+0d",

changeMonth: true,

changeYear: true,

yearRange: "-150:+0"

}).focus(function () {

$(this).blur()

});

})

</script>

<style type="text/css">

.ui-datepicker{font-size:50%}

</style>

</head>

<body>

<input type="text" id="date" name="date" value="">

</body>

</html>











<script type="text/javascript">

        $(document).ready(function () {

         

            $("#rdoIndia").click(function () {

                //$("#content").html(indiaData);

                $("#indiaContent").attr("style","display:block");

                $("#chinaContent").attr("style", "display:none");

                $("#usaContent").attr("style", "display:none");

            });

            $("#rdoUsa").click(function () {

                $("#indiaContent").attr("style","display:none");

                $("#chinaContent").attr("style", "display:none");

                $("#usaContent").attr("style", "display:block");

            });

            $("#rdoChina").click(function () {

                $("#indiaContent").attr("style","display:none");

                $("#chinaContent").attr("style", "display:block");

                $("#usaContent").attr("style", "display:none");

            });

        });

    </script>


<div>
    <input type="radio" name="country" id="rdoIndia"/>India
    <input type="radio" name="country" id="rdoChina"/>Chain
    <input type="radio" name="country" id="rdoUsa"/>Usa
        <div id="indiaContent" style="display:none">
            india
        </div>
         <div id="chinaContent" style="display:none">
            china
        </div>
         <div id="usaContent" style="display:none">
            usa
        </div>
    </div>


































No comments:

Post a Comment