JForms datetimepicker field

  • Alex812
  • Alex812's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
5 years 9 months ago - 5 years 9 months ago #359 by Alex812
Alex812 created the topic: JForms datetimepicker field
First, thank you for this great component. I think it is very promising. So... I have a few questions. Can I change the language of the datetimepicker calendar? I understand that it has to be constantly changing the default dynamically if the local language .js file is here. However, nothing happens - the language is still English. And, accordingly, the weekStart too. However, I noticed in your demo here if I set by the Italian, the language of the datetimepicker does not change.
Also, it would be great to manage a datetimepicker field like this, for example to set the startDate or remove the time display. How I can do this?
Thanks a lot.
Last Edit: 5 years 9 months ago by Alex812.

Please Log in or Create an account to join the conversation.

More
5 years 9 months ago - 5 years 9 months ago #360 by giro
giro replied the topic: JForms datetimepicker field
Hi Alex,
thank you for using jForms, I noticed the datetimepicker, is not that great plugin, and believe me that's the best I found on the web, I've already made a replacement, SUPER FULLY featured on the next release of jForms.
the new datetimepicker is made by me completely from scratch, It's fully customizable and it has built-in multilanguage support.
the following are the options you can have on it (just copied from the JS code):
	defaults = {
		style			: 'popup', // / inline / popup
		autoclose		: false, // autoclose the popup on date / date range selected
		uiTarget		: null, // the UI target to contain the datetime value
		firstDay		: 0, // 0 - 6:  sunday -> saturday  // default 1 (Monday)
		minView			: 'times', // times / days / months / years
		maxView			: 'years', // times / days / months / years
		startView		: 'days', // times / days / months / years
		min				: null, // starting date to allow selection
		max				: null, // ending date to allow selection
		today			: 'now', // if string is provided it will follow the option "format" provided (except for the string "now") / new Date() object
		dateValue		: 'now', // the input value will be used by default, if it's not present, this will be used.
		showDaysNotInMonth : false,
		showDisabledTimes : false,
		calendars		: 1,
		format			: 'd-m-Y', // PHP standard format
		uiFormat		: 'd-m-Y', // PHP standard format. if provided different from the option "format", the original input will be hidden, and the date selected will be shown in this format
		separator		: ' | ', // this will be the separator for multiple dates or date range
		mode			: 'single', // single / multiple / range
		timeFormat		: 24, // 12 / 24
		minuteStep		: 5,
	/*	selectableDays:[
			0, // 0 - 6: sunday -> saturday // you can also use the day name BUT it must be the same word (case sensitive) as specified in the language text options
			'Wednesday',
			{ // you can use an object with more details
				day: 2, // see above, in this case it's wednesday
				selectableTimes: [
					'10:30 - 18:45', // time ranges must be separated by "-"
					'8:10am - 8:20pm', // you can use 12 hours format using AM / PM
					'12:30 - 11:20pm' // if AM / PM is not found, the 24 hours format will be used, so in this case the first time (12:30) is in 24 hours format and the second (11:20pm) in 12 hours format.
				],
				attributes:{
					class:'special'
				},
				message:'My Birthday!!!!'
			}
		],	
	*/
		selectableDays: [], // null, see above for examples will enable all days and all times. Note: in the case of a conflict between selectableDates and selectableDays, selecatableDates has the priority.
		//    notSelectableDates: [
		//        { date: new Date(0, 8, 5), repeatYear: true },
		//        { date: new Date(0, 0, 14), repeatMonth: true, repeatYear: true },
		//        { date: new Date(2013, 0, 24), repeatMonth: true },
		/*		  { 
					date: new Date(2013, 11, 25), // string OR new Date() object see "dateValue" option
					repeatYear: true,
					repeatMonth: true,
					repeatWeek: true, // if repeatWeek is selected, repeatMonth and repeatYear are automatically enabled
					selectableTimes:{
						[
							'10:30 - 18:45', // time ranges must be separated by "-"
							'8:10am - 8:20pm', // you can use 12 hours format using AM / PM
							'12:30 - 11:20pm' // if AM / PM is not found, the 24 hours format will be used, so in this case the first time (12:30) is in 24 hours format and the second (11:20pm) in 12 hours format.
						]
					},
					attributes:{
						class:'special'
					},
					message:'My Birthday!!!!'
				  }		
		*/
		//    ]
		notSelectableDates: [],  // see above for examples
		invertNotSelectableDates: false, // if true the notSelectableDates become selectableDates
		specialDates: [],  // they are used to customize the dates, see notSelectableDates for data format examples
		text : {
			select_a_date: 'Select a date',
			select_a_date_range: 'Select a date range',
			close: 'Close',
			closeBtn: '×',
			prev : '◀',
			next : '▶',
			ok: 'Ok',
			days		: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
			daysShort	: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
			daysMin	: ['Mo','Tu','We','Th','Fr','Sa','Su'],
			months	: ['January','February','March','April','May','June','July','August','September','October','November','December'],
			monthsShort	: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
		},
		
		// callbacks
		onDateRender: function(){return {};},
		onDateChange: function(){return true;},
		onInit: false
	};
I'd like to underline some cool features I added:
- mode: single, multiple, range (you can select a single date, multiple dates, or a range)
- calendars (you can have a datetimepicker with 2, 3 or more calendars)
- format (the format of the date can follow the PHP standard what is light years more evoluted than JS, I had to create some special functions for that)
- selectableDates, notSelectableDates, specialDates, etc. etc. (finally!!! a system to allow/disable selection of datetime on a datetimepicker calendar).

the new release will come soon, but I cannot give you a date, I'm a bit busy right now and I have to review a lot of new features in jForms (including an integrated checkout system with payment gateways).
I'll send a newsletter as usual to inform everybody of the new release.
Last Edit: 5 years 9 months ago by giro.

Please Log in or Create an account to join the conversation.

Fork me on GitHub
Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.
More information Ok