Amitesh/pickadate-demo.html

## pickadate-demo.html
<!doctype html>

<meta charset="utf-8">

<meta name="author" content="Amsul - http://amsul.ca">
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<title>Pickadate.js</title>

<link rel="stylesheet" href="../../lib/themes/default.css">
<link rel="stylesheet" href="../../lib/themes/default.date.css">

<!--[if lt IE 9]>
    <script>document.createElement('section')</script>
    <style type="text/css">
        .holder {
            position: relative;
            z-index: 10000;
        }
        .datepicker {
            display: block;
        }
    </style>
<![endif]-->


<body>

    <section class="section">

        <form>
            <fieldset>
                <h3><label for="input_01">Pick a date. Go ahead...</label></h3>
                <input type="text">
                <input
                    id="input_01"
                    class="datepicker"
                    name="date"
                    type="text"
                    autofocuss
                    value="14 August, 2014"
                    data-valuee="2014-08-08">
                <input type="text">

                <br><br><br><br><br>
                <!-- <button type="button">Disable all dates</button>
                <input class="button" type="submit" value="open"> -->
            </fieldset>
        </form>


        <div id="container" tabindex="-1" style="outline:none;">haha</div>

        <input type="text">

    </section>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/legacy.js"></script>

    <script type="text/javascript">

        var $input = $( '.datepicker' ).pickadate({
            formatSubmit: 'yyyy/mm/dd',
            // min: [2015, 7, 14],
            // container: '#container',
            // editable: true,
            closeOnSelect: true,
            closeOnClear: false,
        })

        var picker = $input.pickadate('picker');

        picker.on('close', function(){
            setTimeout(function(){
                $('#container').focus();
                console.log('haha', picker.$root);
            }, 0)
        })
        // picker.set('select', '14 October, 2014')
        // picker.open()

        // $('button').on('click', function() {
        //     picker.set('disable', true);
        // });

    </script>

<a href="https://codepen.io/amitesh/pen/PRLwvQ">CodePen demo</a>
</body>

</html>
	<!doctype html>

	<meta charset="utf-8">

	<meta name="author" content="Amsul - http://amsul.ca">
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">

	<title>Pickadate.js</title>

	<link rel="stylesheet" href="../../lib/themes/default.css">
	<link rel="stylesheet" href="../../lib/themes/default.date.css">

	<!--[if lt IE 9]>
	<script>document.createElement('section')</script>
	<style type="text/css">
	.holder {
	position: relative;
	z-index: 10000;
	}
	.datepicker {
	display: block;
	}
	</style>
	<![endif]-->


	<body>

	<section class="section">

	<form>
	<fieldset>
	<h3><label for="input_01">Pick a date. Go ahead...</label></h3>
	<input type="text">
	<input
	id="input_01"
	class="datepicker"
	name="date"
	type="text"
	autofocuss
	value="14 August, 2014"
	data-valuee="2014-08-08">
	<input type="text">

	<br><br><br><br><br>
	<!-- <button type="button">Disable all dates</button>
	<input class="button" type="submit" value="open"> -->
	</fieldset>
	</form>



	<div id="container" tabindex="-1" style="outline:none;">haha</div>

	<input type="text">

	</section>


	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/legacy.js"></script>

	<script type="text/javascript">

	var $input = $( '.datepicker' ).pickadate({
	formatSubmit: 'yyyy/mm/dd',
	// min: [2015, 7, 14],
	// container: '#container',
	// editable: true,
	closeOnSelect: true,
	closeOnClear: false,
	})

	var picker = $input.pickadate('picker');

	picker.on('close', function(){
	setTimeout(function(){
	$('#container').focus();
	console.log('haha', picker.$root);
	}, 0)
	})
	// picker.set('select', '14 October, 2014')
	// picker.open()

	// $('button').on('click', function() {
	// picker.set('disable', true);
	// });

	</script>

	<a href="https://codepen.io/amitesh/pen/PRLwvQ">CodePen demo</a>
	</body>

	</html>