Fomantic-UI
Fomantic-UI copied to clipboard
calendar format
Feature Request
some calendar improvements for users
- format
- maxDate
- show year
Description
- I think supporting very basic format like 'yy-mm-dd' is better. I think you can reference jqueryui's datepicker (https://jqueryui.com/datepicker/#date-formats). Please look around.
Now I am writing codes like,
// calendar fn
function calendar_format_date(date) {
if ( ! date ) return '';
var year = date.getFullYear();
var month = date.getMonth() + 1;
if ( month < 10 ) month = '0' + month;
var day = date.getDate();
if ( day < 10 ) day = '0' + day;
return [year, month, day].join('-');
}
// from
var today = new Date();
$("#from").calendar({
type: 'date',
endCalendar: $('#to'),
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
formatter: {
date: function (date, settings) {
return calendar_format_date(date);
}
}
});
and in api also painfully ,
$('.ui.form').form({}).api({
action: 'blah blah',
method: 'POST',
beforeSend: function(settings) {
settings.data.from = calendar_format_date($('#from').calendar('get date'));
<snip>
In jqueryui, format is
$( ".selector" ).datepicker({
dateFormat: "yy-mm-dd"
});
and get date is
var currentDate = $( ".selector" ).datepicker( "getDate" );
- maxDate is also difficult. See maxDate in jqueryui,
$( ".selector" ).datepicker({
maxDate: "+1m +1w"
});
- I want to change year. think about you want to select +1 year after, you should click 12 times. Just for example, https://demo.mobiscroll.com/javascript/calendar/date-picker#
Point 1 and 2 may be solved by using 3rd party libraries like Moment (https://momentjs.com/)
Point 3, you can already click on the "Month Year" at the top (ie. March 2019), go forward a year, then pick the month you need (3 clicks) - I think this is similar to how other calendars work and possibly easier to use when jumping around a lot. Perhaps an alternative layout could be used as well as the current layout, giving everyone flexibility
@jamessampford Yes, there are so many plugins(libraries) in the world. User can add something and more and more. But I think it is important to make you feel that users can do everything fomantic(semantic)ui.js alone. I wish you could make users feel comfortable.
@Hokwang We will think about adding a very lightweight dateFormat functionality to accomplish this task. Stay tuned 🙂
If I could add, the momentjs library is very capable and powerful but you would not want users to have to adopt it for simple utility as per a lightweight dateformat capability. The sweet spot is straightforward functionality with enough capability for everyday use-cases, then leaving the way open for the developer to bring in other libs for more complex cases. Please do not make a dependency on another lib though, as that leads to dependency paralysis.
Maybe make 2 version ? WIth momentjs and simple Fomantic-UI Datepicker
@lubber-de Any news about dateFormat? :)
@lubber-de Any news about dateFormat? :)
Not yet done, still on the large todo list
Dateformat now available by #2324