zulns / datepicker.js Goto Github PK
View Code? Open in Web Editor NEWJavaScript library to creates Hijri/Gregorian Datepicker
License: MIT License
JavaScript library to creates Hijri/Gregorian Datepicker
License: MIT License
hi
can i get the date in format 16/03/2019 also i need it for hijri date ?
Dear,
I would like to thank you for this excellent work.
how can i display the selected date in format (01/01/2019) dd-mm-yyyy format.
Thanks
Hi, I am trying to put two dates on the same page.
the issue is that when I pick the date in the second one it has been inserted in the first field.
I need to insert the start date and the end date as well so, I need two date pickers but I don't know which variable should be changed.
I would appreciate it if you can view my code and help me with this.
thanks in advance
the Code:
<div id="datepicker"></div>
<link rel="stylesheet" href="{{ asset('js/w3css/w3.css') }}"/>
<script type="text/javascript" src="{{ asset('js/HijriDate.js/hijri-date.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/Datepicker.js/datepicker.js') }}"></script>
<div class="w3-container w3-margin-top">
<div class="w3-container w3-margin-top">
<label for="StartDateG">Gregorian Date</label>
<input id="StartDateG" name="StartDateG" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
</div>
<div class="w3-container w3-margin-top">
<label for="StartDateH">Hijri Date</label>
<input id="StartDateH" name="StartDateH" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
</div>
</div>
<script type="text/javascript">
'use strict';
let picker=new Datepicker();
let pickElm=picker.getElement();
let pLeft=200;
let pWidth=300;
pickElm.style.position='absolute';
pickElm.style.left=pLeft+'px';
pickElm.style.top='172px';
picker.attachTo(document.body);
picker.onPicked=function(){
let elgd=document.getElementById('StartDateG');
let elhd=document.getElementById('StartDateH');
if(picker.getPickedDate() instanceof Date){
elgd.value=picker.getPickedDate().getDateString();
elhd.value=picker.getOppositePickedDate().getDateString()
}else{
elhd.value=picker.getPickedDate().getDateString();
elgd.value=picker.getOppositePickedDate().getDateString()
}
};
function openSidebar(){
document.getElementById("mySidebar").style.display = "block"
}
function closeSidebar(){
document.getElementById("mySidebar").style.display = "none"
}
function dropdown(el){
if(el.className.indexOf('expanded')==-1){
el.className=el.className.replace('collapsed','expanded');
}else{
el.className=el.className.replace('expanded','collapsed');
}
}
function selectLang(el){
el.children[0].checked=true;
picker.setLanguage(el.children[0].value)
}
function setFirstDay(fd){
picker.setFirstDayOfWeek(fd)
}
function setYear(){
let el=document.getElementById('valYear');
picker.setFullYear(el.value)
}
function setMonth(){
let el=document.getElementById('valMonth');
picker.setMonth(el.value)
}
function updateWidth(el){
pWidth=parseInt(el.value);
if(!fixWidth()){
document.getElementById('valWidth').value=pWidth;
picker.setWidth(pWidth)
}
}
function pickDate(ev){
ev=ev||window.event;
let el=ev.target||ev.srcElement;
pLeft=ev.pageX;
fixWidth();
pickElm.style.top=ev.pageY+'px';
picker.setHijriMode(el.id=='StartDateH');
picker.show();
el.blur()
}
function gotoToday(){
picker.today()
}
function setTheme(){
let el=document.getElementById('txtTheme');
let n=parseInt(el.value);
if(!isNaN(n))picker.setTheme(n);
else picker.setTheme(el.value)
}
function newTheme(){
picker.setTheme()
}
function fixWidth(){
let docWidth=document.body.offsetWidth;
let isFixed=false;
if(pLeft+pWidth>docWidth)pLeft=docWidth-pWidth;
if(docWidth>=992&&pLeft<200)pLeft=200;
else if(docWidth<992&&pLeft<0)pLeft=0;
if(pLeft+pWidth>docWidth){
pWidth=docWidth-pLeft;
picker.setWidth(pWidth);
document.getElementById('valWidth').value=pWidth;
document.getElementById('sliderWidth').value=pWidth;
isFixed=true
}
pickElm.style.left=pLeft+'px';
return isFixed
}
</script>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>End Date:</strong>
<div id="datepicker"></div>
<link rel="stylesheet" href="{{ asset('js/w3css/w3.css') }}"/>
<script type="text/javascript" src="{{ asset('js/HijriDate.js/hijri-date.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/Datepicker.js/datepicker.js') }}"></script>
<div class="w3-container w3-margin-top">
<div class="w3-container w3-margin-top">
<label for="EndDateG">Gregorian Date</label>
<input id="EndDateG" name="EndDateG" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
</div>
<div class="w3-container w3-margin-top">
<label for="EndDateH">Hijri Date</label>
<input id="EndDateH" name="EndDateH" onclick="pickDate(event)" class="w3-input w3-border" type="text" placeholder="Click to pick a date...">
</div>
</div>
<script type="text/javascript">
'use strict';
let picker=new Datepicker();
let pickElm=picker.getElement();
let pLeft=200;
let pWidth=300;
pickElm.style.position='absolute';
pickElm.style.left=pLeft+'px';
pickElm.style.top='172px';
picker.attachTo(document.body);
picker.onPicked=function(){
let elgd=document.getElementById('EndDateG');
let elhd=document.getElementById('EndDateH');
if(picker.getPickedDate() instanceof Date){
elgd.value=picker.getPickedDate().getDateString();
elhd.value=picker.getOppositePickedDate().getDateString()
}else{
elhd.value=picker.getPickedDate().getDateString();
elgd.value=picker.getOppositePickedDate().getDateString()
}
};
function openSidebar(){
document.getElementById("mySidebar").style.display = "block"
}
function closeSidebar(){
document.getElementById("mySidebar").style.display = "none"
}
function dropdown(el){
if(el.className.indexOf('expanded')==-1){
el.className=el.className.replace('collapsed','expanded');
}else{
el.className=el.className.replace('expanded','collapsed');
}
}
function selectLang(el){
el.children[0].checked=true;
picker.setLanguage(el.children[0].value)
}
function setFirstDay(fd){
picker.setFirstDayOfWeek(fd)
}
function setYear(){
let el=document.getElementById('valYear');
picker.setFullYear(el.value)
}
function setMonth(){
let el=document.getElementById('valMonth');
picker.setMonth(el.value)
}
function updateWidth(el){
pWidth=parseInt(el.value);
if(!fixWidth()){
document.getElementById('valWidth').value=pWidth;
picker.setWidth(pWidth)
}
}
function pickDate(ev){
ev=ev||window.event;
let el=ev.target||ev.srcElement;
pLeft=ev.pageX;
fixWidth();
pickElm.style.top=ev.pageY+'px';
picker.setHijriMode(el.id=='EndDateH');
picker.show();
el.blur()
}
function gotoToday(){
picker.today()
}
function setTheme(){
let el=document.getElementById('txtTheme');
let n=parseInt(el.value);
if(!isNaN(n))picker.setTheme(n);
else picker.setTheme(el.value)
}
function newTheme(){
picker.setTheme()
}
function fixWidth(){
let docWidth=document.body.offsetWidth;
let isFixed=false;
if(pLeft+pWidth>docWidth)pLeft=docWidth-pWidth;
if(docWidth>=992&&pLeft<200)pLeft=200;
else if(docWidth<992&&pLeft<0)pLeft=0;
if(pLeft+pWidth>docWidth){
pWidth=docWidth-pLeft;
picker.setWidth(pWidth);
document.getElementById('valWidth').value=pWidth;
document.getElementById('sliderWidth').value=pWidth;
isFixed=true
}
pickElm.style.left=pLeft+'px';
return isFixed
}
</script>
hi,
today is 17-12-1440 not 16-12-1440 is there any manual adjustment to fix this issue
thanks
Assalam Alykom
I see it will be a big project if you merge between this two projects. So we can pick from dual calender.
Thank You
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.