How to use frappe form controls on a page? Need Date-time picker on a custom page

Frappe Framework
1

I am making a custom page, in which there are multiple fields that need a date-time picker.
Is there any way to initialize the datetime picker without using other libraries or plugins.

I came across frappe.ui.form.make_control, but was unable to get it to work.
Can someone please help me get it running.
Thanks

2

@saeedkola

Using frappe.ui.form.make_control you can add the datetime controller in your custom page, set the fieldtype as “Datetime” and check. For the reference please check below code
https://github.com/frappe/erpnext/blob/develop/erpnext/accounts/page/pos/pos.js#L408-L417

1 Like
3

Thanks, I got it to work.
Just one more thing, How do I set a default value to the datetime field?

4

Also it is not working for multiple input fields.
I have n rows having class .contact_date. I need the picker to initialize on all rows having that class.
Right now it initializes only on the first one.

5

You can set default: '2018-09-09' in the object you are passing to make_control

Maybe you need to put it in a for loop, difficult to suggest a solution without looking at the code.

6

Okay, I got the picker to work, but the default is not working. One option i had was to use frappe.set_value() but that triggers the change event, which is a problem.
This is what I have done, where am I making a mistake?

jQuery.each(page.main.find(".contact_date"),function(index, el) {
	var contact_date = frappe.ui.form.make_control({
	parent: this,
	df: {
			fieldtype: "Datetime",
			default: "2018-05-16 00:00:00",
			change: function(i){
				row_submit($(this.parent).attr('data-lead-name'),'contact_date',contact_date.get_value());						
			}
		}
	});
	contact_date.refresh();
});
7

Try default: frappe.datetime.obj_to_str(new Date(2018, 04, 16))

Btw month index starts from 0 to 11 that’s why 04 = May

8

It sounds like you’re well into this process, but I would have done this as a single doctype and rendered any extra HTML to an HTML field. It’s a little more work to set up but really for almost any form-type interface it is my opinion that a doctype is a better starting point. That said, for people who are coming from environments like Django or Flask, I can see how the page is appealing and the doctype seems too limited. ::off topic. sorry::

9

Well, I am creating a separate page for an existing doctype i.e. Lead, for quick actions like changing the next contact date, lead status and adding remarks.
So creating another doctype is not exactly feasible here.

10

Interesting. How does it compare with a quick entry or a custom dialog? And is it internal or external facing (like regular system users vs external salespeople signing on to drop in this info?

Personally, I’d still probably gone with a single, but I’m very comfortable in that context and less so in others and it would be a personal choice.

11

It is actually integrated in the list view.
In the default lead list, we can have only 4 columns with only that much fields.
The page is set up to be an alternative to the default list view for the leads doctype with fields like status and next contact date directly updatable without opening the single docname.

12

Gotcha. A page-based-approach makes a lot of sense for that application. Good luck!

13

It is not working.
I even tried converting the format using
moment(new Date(2018, 04, 16, 17, 30, 10)).format("DD-MM-YYYY HH:mm:ss")
But no luck.

14

I think you want to make a date or datetime docfield. Here’s an example with a checkbox that will get you most of the way there. The date picker (should?) come with the docfield.

2 Likes
15

I created the datetime picker field using frappe.ui.form.make_control, I am having difficulty setting a default value to it, without triggering the change event.

16

Just tested this code and it’s working for me. By the way, a screen shot ~ two days ago would have probably helped us help you.

function render_datepicker(frm) {
	let datenight = moment();
	make_fieldgroup(frm.fields_dict["htmlpopulate"].wrapper, [{fieldtype: "Datetime", label: "Date Night!", fieldname: "datenight", default: datenight}]);

}
function make_fieldgroup(parent, ddf_list) {
let fg = new frappe.ui.FieldGroup({
		"fields": ddf_list,
		"parent": parent
	});
	fg.make();
}

image
image1855Ă—1056 78.6 KB

Edit: This is in a doctype, haven’t tested it in a page.

17

Hey @saeedkola, you’ve inspired me to do re-imagine what the list view should look like for Projects. How are you redirecting to your new page-based view?

Did you get the date picker working?