Initial Date

[Karolcias36]

I have no idea how to automaticly fullfill the input with some day. I am using fullcalendar and when clicked I am taking a date from it's event. I tried in fiew differrent formats put in initialvaue property bu it didnt work.
This is my code when clicked on the calendar:
dayClick: function (date, jsEvent, view) {
$('#wizyta').show();
$('#rangestart').calendar({
type: 'datetime',
monthFirst: false,
endCalendar: $('#rangeend'),
firstDayOfWeek: 1,
ampm: false,
text: {
days: ['Nd', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sob'],
months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
monthsShort: ['Sty', 'Lu', 'Mar', 'Kwie', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrze', 'Paź', 'Lis', 'Gru'],
today: 'Dziś',
now: 'Teraz'
},
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var year = date.getFullYear();
return year + '-' + month + '-' + day;
}
}
});
var date2 = moment(date).format('YYYY-MM-DD HH:mm');
console.log(date2)
}

[Karolcias36]

Only not console.log(date2); but inititaldate: date2

[dlynchcodes]

Can you create a jsbin or jsfiddle with this first?

https://jsbin.com/ruqakehefa/

[Karolcias36]

When I add value in html as in this link it works, but i need to add it dynamically. I did it by JavaScript (find element and set value) and when I check it in browser console (elements) I see that this input has a correct value but it's not beeing displayed. So i tried the property initialdate as it's discriped in here: https://github.com/mdehoog/Semantic-UI-Calendar but it didn't work at all.

[mdehoog]

Please try set date and pass a Javascript Date object, and not a string or moment.js date.

[Karolcias36]

It helped, thx !

[jaimesangcap]

I have the same issue, I'm trying to set the value of an input text inside a modal. The calendar picker is working (it displays good) but the default date is not being set, the textbox is empty.

// inside jQuery ready
$("#ApproveButton").click(function(e) {
    var $modal = $("#ApproveExtensionModal");
    $modal.modal({
        onShow: function() {
            $('#Deadline').calendar("set date", new Date());
        }
    })
    .modal("show");
});

Here is the modal

<form action="/someurl"
      method="post"
      id="ApproveExtensionModal"
      class="ui small modal"
>
    <i class="close icon"></i>
    <div class="header">Approve Extension</div>
    <div class="content">
        <div class="ui small form">
            <div class="field">
                <label>Deadline</label>
                <div class="ui calendar" id="Deadline">
                    <div class="ui input left icon">
                        <i class="calendar icon"></i>
                        <input type="text" name="deadline" required>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="actions">
        <button type="submit" class="ui purple ok right labeled icon button">
            Approve
            <i class="checkmark icon"></i>
        </button>
    </div>
</form>

[Karolcias36]

I've got code below in $(document).ready function and it works.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = dd + '/' + mm + '/' + yyyy;
$('#Deadline').attr('value', today);
The most important thing here is the date's format. I've got polish lang installed to calendar, so if this won't work try other format (eg. today = mm+ '/'+dd+ '/'+yyyy). Depending on language day can be month and otherwise so after it will be set check if its correct.

[jaimesangcap]

thanks, got it working now. It also accepts momentjs format

<script>
        $(function() {
            $("#ApproveButton").click(function(e) {
               var $modal = $("#ApproveExtensionModal");
                var deadline = moment.tz($(this).data("deadline"), "Asia/Dubai").format();

               $modal.modal({
                   onShow: function() {
                       $('#Deadline').calendar("set date", deadline);
                   }
               })
               .modal("show");
            });
        });
    </script>

[martijnmelchers]

Another solution to this is the momentjs .toDate() function which converts the moment time to an date object.

[Karolcias36]

Thanks jaimesangcap, momentjs is clearer solution.

[coder8keyboard]

the calendar works fine with moment date object. Just format your date something like
var initialValue = myDate.format(myCustomFormat);//e.g. DD-MM-YYYY
Then call $('#rangestart').calendar('set date',initialValue);

Also make sure input value also has initial value.

[lubber-de]

As the calendar has been merged into https://github.com/fomantic/Fomantic-UI , here are the docs
https://fomantic-ui.com/modules/calendar.html#/settings