javascript - Using multiple instances of datetimepicker working with a Range between date -
i'm trying "range between date" work multiple instances. each instance couple has different id. datetimepicker added using class, same instances:
var format = "d-m-y h:i"; var startselector = ".date_timepicker_start"; var endselector = ".date_timepicker_end"; now want id of field clicked, replace start end, have id of matching end field, , use result value:
$(startselector).datetimepicker( { format : format, onshow : function(ct) { var selectedid = $(this).attr('id'); var selid = selectedid.replace("start", "end"); var val = $("#"+selid).val(); console.log('id: '+selectedid); var opts = { formatdate : "d-m-y", maxdate : val ? val.split(' ')[0] : false }; this.setoptions(opts); }, });
the var selectedid = $(this).attr('id');returns undefined however. tried this.id etc.. got idea? i'm overlooking something..
thanks!
$(this) inside onshow method refers datetimepicker div , not input. see undefined
but onshow method has other parameters
onshow : function(date, $input, event)
you can make use second parameter , id $input.attr('id')
also, don't need such multiple selectors. can this
<input type="text" class="datetimepicker" id="start" /> <input type="text" class="datetimepicker" id="end"/> now can use 1 selector this
$('.datetimepicker').datetimepicker({ onshow: function(date, $input, event){ alert($input.attr('id')); } }); var format = "d-m-y h:i"; // var startselector = ".date_timepicker_start"; // var endselector = ".date_timepicker_end"; var options = { format: format, onshow: function(date, $input, event) { alert($input.attr('id')); } }; /* date picker validation js */ $('.datetimepicker').datetimepicker(options);.xdsoft_datetimepicker { box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); background: #ffffff; border-bottom: 1px solid #bbbbbb; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-top: 1px solid #cccccc; color: #333333; font-family: "helvetica neue", "helvetica", "arial", sans-serif; padding: 8px; padding-left: 0; padding-top: 2px; position: absolute; z-index: 9999; -moz-box-sizing: border-box; box-sizing: border-box; display: none; } .xdsoft_datetimepicker iframe { position: absolute; left: 0; top: 0; width: 75px; height: 210px; background: transparent; border: none; } /*for ie8 or lower*/ .xdsoft_datetimepicker button { border: none !important; } .xdsoft_noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .xdsoft_noselect::selection { background: transparent; } .xdsoft_noselect::-moz-selection { background: transparent; } .xdsoft_datetimepicker.xdsoft_inline { display: inline-block; position: static; box-shadow: none; } .xdsoft_datetimepicker * { -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } .xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker { display: none; } .xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active { display: block; } .xdsoft_datetimepicker .xdsoft_datepicker { width: 224px; float: left; margin-left: 8px; } .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_datepicker { width: 256px; } .xdsoft_datetimepicker .xdsoft_timepicker { width: 58px; float: left; text-align: center; margin-left: 8px; margin-top: 0; } .xdsoft_datetimepicker .xdsoft_datepicker.active+.xdsoft_timepicker { margin-top: 8px; margin-bottom: 3px } .xdsoft_datetimepicker .xdsoft_mounthpicker { position: relative; text-align: center; } .xdsoft_datetimepicker .xdsoft_label i, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button { background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaagqaaaaecayaaadaw7vzaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaayjpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumy1jmdexidy2lje0nty2mswgmjaxmi8wmi8wni0xndo1njoynyagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientniaov2luzg93cykiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6q0nbrji1njm0m0uwmtffndk4nkfgmzjfqkqzqjewruiiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6q0nbrji1njq0m0uwmtffndk4nkfgmzjfqkqzqjewruiipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdpdq0fgmju2mtqzrtaxmuu0otg2quyzmkvcrdncmtbfqiigc3rszwy6zg9jdw1lbnrjrd0ieg1wlmrpzdpdq0fgmju2mjqzrtaxmuu0otg2quyzmkvcrdncmtbfqiivpia8l3jkzjpezxnjcmlwdglvbj4gpc9yzgy6ukrgpia8l3g6eg1wbwv0yt4gpd94cgfja2v0igvuzd0icii/ponep54aaaiosurbvhja7jq9tsmwemcxrzd4wpbyekuce+ktmcachzh4bffho/aaihzgfhykbbsseqxslcagxkhbxyotxh9pfjvp+qutnz5s/5lz2y5i03qhwji2gicgaokwgfcxnvcoccgkqisqhup0lahone05vdeygmfkdxjdvjgwdleqgyqbgx+uljawsxxs6r/er5fbvr8vfgfttkcitns+a1xpcfoexreidf14avifxgqus+h520cdud6wnkc0ubw6bco/hocywbhd8qckq/x1mwdyd4plh4d6ddv0tagyo4hcawlibbsldkheh0mg2yvp3l4tqmzqddseol/mghqqhmnue0d+obh0cir8makyazbh9wybukxdwgbxfjnf32tz1kwm/ap1osk/r53utq5xth3lulmmt8gt6g51q9p+sobxgjq/qmsfzhwywgfsl0ybjcljcmgxail3b7+rumdvj2yrss4cn+r6qahdkpwjpjdjcf4n9rmad/v9a/wp4nqassdjwlb6xbicxcjqwmzzb8thfilfy/lfrtvlghq2tqthrrmtknj0sihdo15rt+rpywwfdy96uz/ldqkbgjcxpcc1alsfeflmoud+1knuxbduvrvobmooc/recn7oqxkvejtciaduzujha2oez9qtkp72otvcxdcxy8iknkxgajxmjcoqwoa6dhyxsoa6xwegakdeb5et3rqdaaaaaelftksuqmcc); } .xdsoft_datetimepicker .xdsoft_label { opacity: 0.5; background-position: -92px -19px; display: inline-block; width: 9px; height: 20px; vertical-align: middle; } .xdsoft_datetimepicker .xdsoft_prev { float: left; background-position: -20px 0; } .xdsoft_datetimepicker .xdsoft_today_button { float: left; background-position: -70px 0; margin-left: 5px; } .xdsoft_datetimepicker .xdsoft_next { float: right; background-position: 0 0; } .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_today_button { background-color: transparent; background-repeat: no-repeat; border: 0 none currentcolor; cursor: pointer; display: block; height: 30px; opacity: 0.5; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=50)"; outline: medium none currentcolor; overflow: hidden; padding: 0; position: relative; text-indent: 100%; white-space: nowrap; width: 20px; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_next { float: none; background-position: -40px -15px; height: 15px; width: 30px; display: block; margin-left: 14px; margin-top: 7px; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_prev { background-position: -40px 0; margin-bottom: 7px; margin-top: 0; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box { height: 151px; overflow: hidden; border-bottom: 1px solid #dddddd; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div { background: #f5f5f5; border-top: 1px solid #dddddd; color: #666666; font-size: 12px; text-align: center; border-collapse: collapse; cursor: pointer; border-bottom-width: 0; height: 25px; line-height: 25px; } .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div > div:first-child { border-top-width: 0; } .xdsoft_datetimepicker .xdsoft_today_button:hover, .xdsoft_datetimepicker .xdsoft_next:hover, .xdsoft_datetimepicker .xdsoft_prev:hover { opacity: 1; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=100)"; } .xdsoft_datetimepicker .xdsoft_label { display: inline; position: relative; z-index: 9999; margin: 0; padding: 5px 3px; font-size: 14px; line-height: 20px; font-weight: bold; background-color: #fff; float: left; width: 182px; text-align: center; cursor: pointer; } .xdsoft_datetimepicker .xdsoft_label:hover>span { text-decoration: underline; } .xdsoft_datetimepicker .xdsoft_label:hover { opacity: 1.0; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select { border: 1px solid #ccc; position: absolute; right: 0; top: 30px; z-index: 101; display: none; background: #fff; max-height: 160px; overflow-y: hidden; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect { right: -7px; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect { right: 2px; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { color: #fff; background: #ff8000; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option { padding: 2px 10px 2px 5px; text-decoration: none !important; } .xdsoft_datetimepicker .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { background: #33aaff; box-shadow: #178fe5 0 1px 3px 0 inset; color: #fff; font-weight: 700; } .xdsoft_datetimepicker .xdsoft_month { width: 100px; text-align: right; } .xdsoft_datetimepicker .xdsoft_calendar { clear: both; } .xdsoft_datetimepicker .xdsoft_year { width: 48px; margin-left: 5px; } .xdsoft_datetimepicker .xdsoft_calendar table { border-collapse: collapse; width: 100%; } .xdsoft_datetimepicker .xdsoft_calendar td > div { padding-right: 5px; } .xdsoft_datetimepicker .xdsoft_calendar th { height: 25px; } .xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th { width: 14.2857142%; background: #f5f5f5; border: 1px solid #dddddd; color: #666666; font-size: 12px; text-align: right; vertical-align: middle; padding: 0; border-collapse: collapse; cursor: pointer; height: 25px; } .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th { width: 12.5%; } .xdsoft_datetimepicker .xdsoft_calendar th { background: #f1f1f1; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { color: #33aaff; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current { background: #33aaff; box-shadow: #178fe5 0 1px 3px 0 inset; color: #fff; font-weight: 700; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled, .xdsoft_datetimepicker .xdsoft_time_box >div >div.xdsoft_disabled { opacity: 0.5; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=50)"; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month.xdsoft_disabled { opacity: 0.2; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=20)"; } .xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover { color: #fff !important; background: #ff8000 !important; box-shadow: none !important; } .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_disabled:hover { color: inherit !important; background: inherit !important; box-shadow: inherit !important; } .xdsoft_datetimepicker .xdsoft_calendar th { font-weight: 700; text-align: center; color: #999; cursor: default; } .xdsoft_datetimepicker .xdsoft_copyright { color: #ccc !important; font-size: 10px; clear: both; float: none; margin-left: 8px; } .xdsoft_datetimepicker .xdsoft_copyright { color: #eee !important; } .xdsoft_datetimepicker .xdsoft_copyright a:hover { color: #aaa !important; } .xdsoft_time_box { position: relative; border: 1px solid #ccc; } .xdsoft_scrollbar >.xdsoft_scroller { background: #ccc !important; height: 20px; border-radius: 3px; } .xdsoft_scrollbar { position: absolute; width: 7px; right: 0; top: 0; bottom: 0; cursor: pointer; } .xdsoft_scroller_box { position: relative; } .xdsoft_datetimepicker.xdsoft_dark { box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506); background: #000000; border-bottom: 1px solid #444444; border-left: 1px solid #333333; border-right: 1px solid #333333; border-top: 1px solid #333333; color: #cccccc; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box { border-bottom: 1px solid #222222; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div { background: #0a0a0a; border-top: 1px solid #222222; color: #999999; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label { background-color: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select { border: 1px solid #333; background: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { color: #000; background: #007fff; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { background: #cc5500; box-shadow: #b03e00 0 1px 3px 0 inset; color: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_next, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button { background-image: url(data:image/png;base64,ivborw0kggoaaaansuheugaaagqaaaaecayaaadaw7vzaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaayjpvfh0we1momnvbs5hzg9izs54bxaaaaaaadw/ehbhy2tldcbizwdpbj0i77u/iibpzd0ivzvnme1wq2voauh6cmvtek5uy3pryzlkij8+idx4onhtcg1ldgegeg1sbnm6ed0iywrvymu6bnm6bwv0ys8iihg6eg1wdgs9ikfkb2jlifhnucbdb3jliduumy1jmdexidy2lje0nty2mswgmjaxmi8wmi8wni0xndo1njoynyagicagicagij4gphjkzjpsreygeg1sbnm6cmrmpsjodhrwoi8vd3d3lnczlm9yzy8xotk5lzaylziylxjkzi1zew50yxgtbnmjij4gphjkzjpezxnjcmlwdglvbibyzgy6ywjvdxq9iiigeg1sbnm6eg1wpsjodhrwoi8vbnmuywrvymuuy29tl3hhcc8xljaviib4bwxuczp4bxbntt0iahr0cdovl25zlmfkb2jllmnvbs94yxavms4wl21tlyigeg1sbnm6c3rszwy9imh0dha6ly9ucy5hzg9izs5jb20vegfwlzeumc9zvhlwzs9szxnvdxjjzvjlzimiihhtcdpdcmvhdg9yvg9vbd0iqwrvymugughvdg9zag9wientniaov2luzg93cykiihhtce1nokluc3rhbmnlsuq9inhtcc5pawq6quexquuzota0m0uymtffndlbm0ffqtjentexrdvbodyiihhtce1nokrvy3vtzw50suq9inhtcc5kawq6quexquuzote0m0uymtffndlbm0ffqtjentexrdvbodyipia8eg1wtu06rgvyaxzlzezyb20gc3rszwy6aw5zdgfuy2vjrd0ieg1wlmlpzdpbqtfbrtm4rtqzrtixmuu0ouezquvbmkq1mtfenue4niigc3rszwy6zg9jdw1lbnrjrd0ieg1wlmrpzdpbqtfbrtm4rjqzrtixmuu0ouezquvbmkq1mtfenue4niivpia8l3jkzjpezxnjcmlwdglvbj4gpc9yzgy6ukrgpia8l3g6eg1wbwv0yt4gpd94cgfja2v0igvuzd0icii/pp0vxgeaaaiasurbvhja7jrnsgmxemebtgh+3mslr1t1xn2choskb08+qmr8bx9a8e7rixdb9ckcondexiugxflja7rnznetblipm/cnnlsdmvnjm8l0mrciq9ye61ikcagzaunh+mu3mmzahychbnjudzwofzdvfc5+zflbrwdexpwbxiqrllfaes0hebvgirqceizohqwtlgsbyccdybl8g8egttawokqmrbrbczxylhzhkegqmoageerschvkk3hxifoodghb1kkhihvgzkb4adjq/a1jafmayhkqqa5tobtocrkrgxwqa8gcfiuaio8sqsa7hidvpwaqgzsaayhouwjabhwww2emih9qagqeru4sarjxo0zzl18uvaxejxt/em8xjvbxmvfr1kvm/aj10tre2xnranqajvke3khuubfk1e+vhb0q40/y3sdqsxy4fhwekjcunp8uyddqjzent3ntvv5jiycah20vt7iop8tpf6e2lfemwere+whv1mhjwzb7pbicxcgqwwkzkd62lfgnnp/1pofaa60t7rf1ugckd2id3kdeus+olwv8dfwaepofq00cgqabi9zjcgjvyvd7pvzquaugaqkbnjtbicdhgwytjdyd6xew08zkh+a4pykzenoxxubvzcwz7e8ykrmnihgx1xpl+1m2vpypl+2qdb8cdaarlkfez/zvkaaaaabjru5erkjggg==); } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { background: #0a0a0a; border: 1px solid #222222; color: #999999; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { background: #0e0e0e; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today { color: #cc5500; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current { background: #cc5500; box-shadow: #b03e00 0 1px 3px 0 inset; color: #000; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover, .xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div:hover { color: #000 !important; background: #007fff !important; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th { color: #666; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright { color: #333 !important; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright { color: #111 !important; } .xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover { color: #555 !important; } .xdsoft_dark .xdsoft_time_box { border: 1px solid #333; } .xdsoft_dark .xdsoft_scrollbar >.xdsoft_scroller { background: #333 !important; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/xdan/datetimepicker/master/jquery.datetimepicker.js"></script> <div class="input-daterange input-group"> <input type="text" class="input-sm form-control datetimepicker" id="start" autocomplete="off" /> <span class="input-group-addon">to</span> <input type="text" class="input-sm form-control datetimepicker" id="end" autocomplete="off" /> </div>
Comments
Post a Comment