Display datepicker on a web page

Frappe Framework Website
1

We have a website which features a view input fields that should get submitted to the database on submit. One of the fields should allow entry of a date.

grafik
grafik1210Ă—287 5.28 KB

We would like to use a datepicker for this field. The html code looks something like

<div class="input-group date">
  <input id="desireddate" class="form-control" name="desireddate" placeholder="Desired date" type="text"> 
  <span class="input-group-addon">     
     <span class="glyphicon glyphicon-calendar"></span> 
  </span>
</div>

However, trying to map the standard datepicker using a website script like

$('#desireddate input').datepicker({    });

fails with datepicker is not a function. So, trying to import the datepicker with a script like

$(document).ready(function() {
  $.getScript('/assets/frappe/js/lib/datepicker/datepicker.min.js', function() {
     var options={
        format: 'yyyy-mm-dd',
        todayHighlight: true,
        autoclose: true,
     };
     $('#desireddate input').datepicker(options);
  });
});

Importing the style with

@import url("/assets/frappe/js/lib/datepicker/datepicker.min.css");

…but, nothing happens. Any ideas why the datepicker does not show up?

2

Did you tried in-built function? There is fieldtype “date” might help you. You may refer here: https://erpnext.org/docs/user/manual/en/customize-erpnext/articles/field-types.html

Often, creating doctype, we can choose whatever field type required. Try it, might help.

3

Hi @asharamseervi,

if I try this with a Web Form and an underlying DocType with a Date field, then it works like a charm. But the problem is that I need to embed this in a Web Page (already existing), in order to embed the function. I tried to mirror the functionality from the Web Form sample, but still nothing appears when I hit the field…

4

Found a nice and easy solution: using HTML5, this can be very simple resolved using input type=“date”

<div class="input-group date"> 
  <input id="desireddate" class="form-control" name="desireddate" placeholder="Desired date" type="date">  
  <span class="input-group-addon">
     <span class="glyphicon glyphicon-calendar"></span> 
  </span>
</div>

This looks like this:

grafik
grafik1058Ă—327 11.9 KB

The date is displayed in a localised version, but the value in the background is the correct ISO standard (YYYY-MM-DD), which fits into the database.

Note: it works out of the box in Chrome and Edge, but not Firefox. In order to enable this in Firefox >= v51, open about:config and set dom.forms.datetime = true

3 Likes