Open Karolcias36 opened 7 years ago
Only not console.log(date2); but inititaldate: date2
Can you create a jsbin or jsfiddle with this first?
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.
Please try set date
and pass a Javascript Date object, and not a string or moment.js date.
It helped, thx !
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>
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.
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>
Another solution to this is the momentjs .toDate()
function which converts the moment time to an date object.
Thanks jaimesangcap, momentjs is clearer solution.
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.
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
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) }