How to get Date from Navigator using JavaScript and copy to textbox

1. You can get the current selection using the following properties:
* nav.selectionDay - the exact day that was clicked
* nav.selectionStart - start of the selection
* nav.selectionEnd - end of the selection (note that this is an exact time point)

The selectionDay and selectionStart values will always be the same only for selectMode = "Day".

See also:
https://api.daypilot.org/daypilot-navigator-selectionday/
https://api.daypilot.org/daypilot-navigator-selectionstart/
https://api.daypilot.org/daypilot-navigator-selectionend/

You can watch the changes using onBeforeTimeRangeSelected:
https://api.daypilot.org/daypilot-navigator-ontimerangeselected/

2. You can select a specific date by calling nav.select(date):
https://api.daypilot.org/daypilot-navigator-select/

Thanks for reply.

Seems

TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "DateChange()",

don't work, if I bind DateChange() to any onclick input then it works, but if I bind it to TimeRangeSelectedJavaScript it doesn't work on day changing. Also how to get only date in dd-mm-yyyy from selectionDay, because it displays yyyy-mm-ddThh:mm:ss ? How to make TimeRangeSelectedJavaScript working?

OK Nevermind, just need to get TimeRangeSelectedJavaScript working, rest I've already done by myself.

What version of DayPilot do you use?

This seems to work fine (modified Views/Calendar/Index.cshtml from the demo):

    @Html.DayPilotNavigator("dpn", new DayPilotNavigatorConfig { 
        ShowMonths = 3,
        SkipMonths = 3,
        ShowWeekNumbers = true,
        BoundDayPilot = "dpc",
        SelectMode = NavigatorSelectMode.Week,
        BackendUrl = Url.Content("~/Calendar/NavigatorBackend"),
        VisibleRangeChangedHandling = VisibleRangeChangedHandlingType.CallBack,
        TimeRangeSelectedHandling = TimeRangeSelectedHandlingType.JavaScript,
        TimeRangeSelectedJavaScript = "alert('test');"
    })

Just for completeness, the date can be formatted using .toString() method:

var str = dpn.selectionStart.toString("dd-MM-yyyy");

I'm using the newest Pro MVC version.

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
{
ShowMonths = 1,
CellWidth = 28,
TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
TimeRangeSelectedJavaScript = "DateChange()",
})

and my script

<script type="text/javascript">
function DateChange()
{
var data1 = document.getElementById("Data");
var data = new Date(nv.selectionStart);
var year = data.getFullYear();
var month = (1 + data.getMonth()).toString();
month = month.length > 1 ? month : '0' + month;
var day = data.getDate().toString();
day = day.length > 1 ? day : '0' + day;
data1.value = year + '-' + month + '-' + day;
}
</script>

Script works fine if I bind it into "onclick" event in any element, but doesn't work with changing days in navigator.

This seems to work fine:

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
   {
       ShowMonths = 1,
       CellWidth = 28,
       TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
       TimeRangeSelectedJavaScript = "DateChange(start, end)",
   })

<input id="Data" />
<script>
    function DateChange(start, end) {
        var data1 = document.getElementById("Data");
        data1.value = start.toString("dd-MM-yyyy");
    }

</script>

Let me know if it doesn't help.

It's not working. It doesn't even go into this script function, I put console.log inside and it doesn't even show text in Chrome console.

I pasted the snippet above into the demo view and it works fine for me. Do you see any JavaScript error in the console?

You can also try this:

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
   {
       ShowMonths = 1,
       CellWidth = 28,
       TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
       TimeRangeSelectedJavaScript = "alert(start)",
   })

It doesn't work. I have no idea why. There are no errors or informations in chrome console... But same JS function works fine (ofc without arguments) with any onclick element event...

Can you please check the output HTML?

For the last example, it should look like this:

<div id='nv'></div>
<script type='text/javascript'>
/* DayPilotPro: 8.3.0.0 */
var nv = new DayPilot.Navigator('nv');
nv.api = 1;
nv.cellHeight = 20;
nv.cellWidth = 28;
nv.command = 'navigate';
nv.theme = '';
nv.cssOnly = true;
nv.dayHeaderHeight = 20;
nv.locale = 'en-us';
nv.month = 12;
nv.orientation = 'Vertical';
nv.rowsPerMonth = 'Six';
nv.selectMode = 'day';
nv.selectionStart = new DayPilot.Date('2016-12-12T00:00:00');
nv.selectionEnd = new DayPilot.Date('2016-12-12T00:00:00');
nv.showMonths = 1;
nv.showWeekNumbers = false;
nv.skipMonths = 1;
nv.titleHeight = 20;
nv.weekStarts = 0;
nv.weekNumberAlgorithm = 'Auto';
nv.year = 2016;
nv.onAjaxError = function(args) { var request = args.request; if (DayPilot.Modal) { new DayPilot.Modal().showHtml(args.request.responseText); } else { alert('AJAX callback error (500)'); };  };nv.timeRangeSelectedHandling = 'JavaScript';
nv.onTimeRangeSelected = function(start, end) { alert(start); };
nv.visibleRangeChangedHandling = 'JavaScript';
nv.onVisibleRangeChanged = function(start, end) { ; };
DayPilot.Locale.register(new DayPilot.Locale('en-us', {'dayNames':['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],'dayNamesShort':['Su','Mo','Tu','We','Th','Fr','Sa'],'monthNames':['January','February','March','April','May','June','July','August','September','October','November','December',''],'monthNamesShort':['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',''],'timePattern':'h:mm tt','datePattern':'M/d/yyyy','dateTimePattern':'M/d/yyyy h:mm tt','timeFormat':'Clock12Hours','weekStarts':0}));
nv.init();
</script>

This is my full webpage code
http://pastebin.com/4xXr93KB

Your code works great with my function, so I have no idea why it is not working with MVC one...

Can you please try this simplified view?

@using DayPilot.Web.Mvc;

@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/DayPilot/daypilot-all.min.js")" type="text/javascript"></script>

@Html.DayPilotNavigator("nv", new DayPilotNavigatorConfig
{
    ShowMonths = 1,
    CellWidth = 28,
    TimeRangeSelectedHandling = DayPilot.Web.Mvc.Events.Navigator.TimeRangeSelectedHandlingType.JavaScript,
    TimeRangeSelectedJavaScript = "DateChangeOnNavigator()"
})

<input class="form-control" id="Data" onclick="DateChangeOnNavigator()" />

<script type="text/javascript">
    function DateChangeOnNavigator()
    {
        var data = document.getElementById("Data");
        data.value = nv.selectionStart.toString("yyyy-MM-dd");
    }
</script>

Let me know if it makes any difference.

It works, so where is the problem?

It looks like something might be interfering with the event handler (I've never seen that but it looks like it indeed does). Now you need to try adding back the pieces of your original view one by one until it stops working - so you'll know what is the culprit.

You can also try it the other way - try disabling all external js <script> references first. This is the most likely source of the problem.

This script is creating a problem, when I commented it then putting date in input is working fine...

<script type="text/javascript">
var switcher = new DayPilot.Switcher();

switcher.addView(dp_day);
switcher.addView(dp_week);

switcher.addButton("toolbar_day", dp_day);
switcher.addButton("toolbar_week", dp_week);

switcher.addNavigator(nv);

switcher.show(dp_day);
</script>

Why is it making a problem?

Oh, sorry - I forgot about that one.

The Switcher redefines the onTimeRangeSelected handler so it can forward the change to the view that is active right now.

You can define onTimeRangeSelected for the switcher instead:

<script type="text/javascript"> 
  var switcher = new DayPilot.Switcher();

  switcher.addView(dp_day); 
  switcher.addView(dp_week);

  switcher.addButton("toolbar_day", dp_day); 
  switcher.addButton("toolbar_week", dp_week);

  switcher.addNavigator(nv);

  switcher.onTimeRangeSelected = function(args) {
    DateChangeOnNavigator();
  };

  switcher.show(dp_day); 
</script>

I did it, but now it doesn't change my calendar Date.

Is there any error in the JavaScript console?

No errors in console.

One more question:

> I did it, but now it doesn't change my calendar Date.

Does that mean it doesn't update the Calendar control or the <input>?

It doesn't update Calendar, input is being updated very well.

The event handler defined using switcher.onTimeRangeSelected is fired after the Calendar update is requested - it shouldn't affect it in any way. You should see a POST request to the URL specified using BackendUrl with "action":"Command" and "command":"navigate" properties.

I'll have to create a test page and try to reproduce the issue.

With .onTimeRangeSelected = function..... it doesn't go to command, but if I delete this line it goes to command but does not change the input.

Something like this would happen if you used this:

<script type="text/javascript"> 
  var switcher = new DayPilot.Switcher();

  // ...
  
  nv.onTimeRangeSelected = function(args) {
    DateChangeOnNavigator();
  };

  // ...

</script>

instead of this:

<script type="text/javascript"> 
  var switcher = new DayPilot.Switcher();

  // ...
  
  switcher.onTimeRangeSelected = function(args) {
    DateChangeOnNavigator();
  };

  // ...

</script>

Can you please check if the event handler is defined on "switcher" and not "nv"?

I changed nv.onTimeRangeSelected into switcher.onTimeRangeSelected and now it works perfectly, it changes both the calendar and input. Thanks a lot!

Great, thanks for the update!