Materialize, a CSS Framework based on material design, now with Jalali datepicker support.
-- Browse the docs --
- Quickstart
- Documentation
- Supported Browsers
- Changelog
- Testing
- Contributing
- Changes for Jalali Datepicker Support
- Copyright and license
Read the getting started guide for more information on how to use materialize.
- Download the latest release of materialize directly from GitHub. (Beta)
- Clone the repo:
git clone https://github.com/Dogfalo/materialize.git(Beta:git clone -b v1-dev https://github.com/Dogfalo/materialize.git) - Include the files via cdnjs. More here. (Beta)
- Install with npm:
npm install materialize-css(Beta:npm install materialize-css@next) - Install with Bower:
bower install materialize(DEPRECATED) - Install with Atmosphere:
meteor add materialize:materialize(Beta:meteor add materialize:materialize@=1.0.0-beta)
The documentation can be found at http://materializecss.com. To run the documentation locally on your machine, you need Node.js installed on your computer.
Run these commands to set up the documentation:
git clone https://github.com/Dogfalo/materialize
cd materialize
npm installThen run grunt monitor to compile the documentation. When it finishes, open a new browser window and navigate to localhost:8000. We use BrowserSync to display the documentation.
Previous releases and their documentation are available for download.
Materialize is compatible with:
- Chrome 35+
- Firefox 31+
- Safari 9+
- Opera
- Edge
- IE 11+
For changelogs, check out the Releases section of materialize or the CHANGELOG.md.
We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, here's a starting guide on how to write tests in Jasmine.
Check out the CONTRIBUTING document in the root of the repository to learn how you can contribute. You can also browse the help-wanted tag in our issue tracker to find things to do.
This fork of MaterializeCSS includes added support for the Jalali (Persian) calendar in the datepicker component.
- Include the
jalaali.min.jsscript before MaterializeCSS:
<script src="path/to/jalaali.min.js"></script>- Initialize the datepicker with the
calendarTypeset to'jalali':
M.Datepicker.init(elems, {
calendarType: 'jalali', // Switch between Jalali or Gregorian
format: 'yyyy-mm-dd', // Jalali date format
i18n: {
cancel: "لغو",
clear: "پاک کردن",
done: "تأیید",
previousMonth: "‹",
nextMonth: "›",
months: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور",
"مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"],
weekdays: ["یکشنبه", "دوشنبه", "سهشنبه", "چهارشنبه",
"پنجشنبه", "جمعه", "شنبه"],
}
});Here’s a basic example of how to use the Jalali datepicker:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Persian Datepicker with Materialize CSS</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<input type="text" class="datepicker" id="datepicker">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jalaali-js@1.2.7/dist/jalaali.min.js"></script>
<script src="dist/js/materialize.min.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
const elems = document.querySelectorAll('.datepicker');
M.Datepicker.init(elems, {
calendarType: 'jalali',
format: 'yyyy-mm-dd',
i18n: {
cancel: "لغو",
clear: "پاک کردن",
done: "تأیید"
},
onDraw: function (instance) {
// Find the footer specific to the modal of this datepicker instance
const modalFooter = instance.modalEl.querySelector('.datepicker-footer');
// Add the "Go to Today" button if it doesn't exist
let todayButton = instance.modalEl.querySelector('.datepicker-today-button');
if (!todayButton) {
todayButton = document.createElement('button');
todayButton.setAttribute("data-id", instance.el.getAttribute("id"))
todayButton.className = 'datepicker-today-button btn-flat green-text text-darken-2';
todayButton.textContent = 'برو به امروز'; // "Go to Today" in Persian
todayButton.style.width = '50%';
modalFooter.appendChild(todayButton)
todayButton.addEventListener('click', function () {
const datepickerElems = document.querySelector(`#${this.getAttribute("data-id")}`);
const instance = M.Datepicker.getInstance(datepickerElems);
const todayDate = new Date();
instance.setDate(todayDate);
instance.gotoDate(todayDate); // Navigate to today's date
});
}
}
});
});
</script>
</body>
</html>
Code Copyright 2018 Materialize. Code released under the MIT license.