Fomantic-UI icon indicating copy to clipboard operation
Fomantic-UI copied to clipboard

calendar format

Open Hokwang opened this issue 5 years ago • 8 comments

Feature Request

some calendar improvements for users

  1. format
  2. maxDate
  3. show year

Description

  1. 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" );
  1. maxDate is also difficult. See maxDate in jqueryui,
$( ".selector" ).datepicker({
  maxDate: "+1m +1w"
});
  1. 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#

Hokwang avatar Mar 14 '19 04:03 Hokwang

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 avatar Mar 14 '19 21:03 jamessampford

@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 avatar Mar 19 '19 11:03 Hokwang

@Hokwang We will think about adding a very lightweight dateFormat functionality to accomplish this task. Stay tuned 🙂

lubber-de avatar Mar 19 '19 11:03 lubber-de

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.

VanquishedWombat avatar Jan 28 '20 18:01 VanquishedWombat

Maybe make 2 version ? WIth momentjs and simple Fomantic-UI Datepicker

paulvales avatar Jan 29 '20 03:01 paulvales

@lubber-de Any news about dateFormat? :)

bornemisza avatar Jul 12 '20 18:07 bornemisza

@lubber-de Any news about dateFormat? :)

Not yet done, still on the large todo list

lubber-de avatar Jul 12 '20 18:07 lubber-de

Dateformat now available by #2324

lubber-de avatar Apr 15 '22 22:04 lubber-de