Show Hide Calendar for HTML

[Shashank]

Hi team,

I want that on page load my calender control is closed and on a button click it should get open and allow me to select date and on selection the control should again get closed populating a textbox with the selected date.

I have achieved this in your XAML control, but i am not able to succeed here.

Looking forward for your help.

Thanks,
-Shashank

[Martin Yankov]

Hello Shashank,

Here is an example solution to your scenario:

1. Add the Calendar control inside a FlyOut.
2. On button click, show the FlyOut with the Calendar control.
3. On Calendar change, save the selected value in a text input and hide the FlyOut.

Below you can see a code sample for reference:

<input id="button" type="button" value="Choose a Date" />
<input id="date" type="text" />
<div id="flyOut" data-win-control="WinJS.UI.Flyout">
    <div id="calendar"></div>
</div>

Here is the code behind:

var button = document.getElementById("button"),
    input = document.getElementById("date"),
    flyOut = document.getElementById("flyOut"),
    calendar = new Telerik.UI.RadCalendar(document.getElementById("calendar"));

button.addEventListener("click", function () {
    flyOut.winControl.show(button);
});

calendar.addEventListener("change", function (e) {
    var calendarControl = e.target,
        value = calendarControl.value.toDateString();

    input.value = value;
    flyOut.winControl.hide();
});

You can also find an example project attached. Let me know if you need any further assistance.

Regards,
Martin Yankov
Telerik

 

 

[alis]

The easiest way is data picker jQuery's. One line of code....done.
<script type="text/javascript">
$( "#datepicker" ).datepicker();
</script>