All posts by Tony

Presently he works as a permanent IT Specialist at Re-Imagine Co.,Ltd. in Source of Supply Dept. Life biography I was born in a small town called “Ubolratana” in Khon Kaen province of Kingdom of Thailand. I have raised with poor, but warmth family. I have one older sister. In the country life, I have such a big family that I met them every week when I was kid. I was closed to grandfathers, grandmothers, uncles, aunts and all cousins. Then I left the hometown to study in capital city, Bangkok, and live here since then. Working here for a few companies, do the freelance job and etc. I have opportunities to went aboard twice, one in Singapore and another in United States. Education biography Kindergarten school at Lumpang province in Northern. Primary school at Nakornrachasima province (Korat) in Northeast. Secondary school – High Vocational at Khon Kaen province in Northeast. Also I have some university studied in Bangkok several times, but never graduated yet. I have some English study at AUA for a course or two. Right now I almost finish Bachelor Degree in computer science at Ram Kham Haeng University. Work biography Apr 2001 – Nov 2001 Web designer at MBA Computer Shop (which is MBA INET Co.,Ltd. Now) Nov 2001 – Dec 2003 Web designer/programmer at Digit Dot Info Systems Co.,Ltd. Jan 2004 – Sep 2004 Self Employ as a freelance programmer / instructor May 2005 – April 2007 Senior programmer at Hartt Media Co.,Ltd. May 2007 – April 2008 Self Employ as a freelance programmer May 2008 - Dec 2009 IT Specialist at Source of Supply Jan 2009 - Nov 2011 Web programming freelancer Nov 2011 - Present IT Manager at teleMates (Thailand) Limited Skills Applications: Internet, HTML, Gif Animation, Macromedia Dream Weaver 3.0 - MX, MS Office, Photoshop 5.5 - CS, MS Visual Studio.NET, Edit Plus, FTP clients, Email Clients and all general application that related with MS Windows and Internet as well. Programming language experience: CSS, DHTML, HTML, CGI/Perl, Good in PHP, some ASP, ASP.NET and VB.NET. I can learn new language in a short period. Database experience: General Language of SQL, MySQL, MSSQL, some Oracle. I also am interesting to learn as an database administrator. Additional computer experience: General computer application and some of networking experience. Typing: 40 - 50 words/min. (THAI/ENGLISH) Interests: Computer, Internet, Learn new technology, Movie and music
Business, Seller Tips

พูดเรื่องเทรนด์การขายออนไลน์ในปี 2019 กันหน่อย

Leave a comment

เมื่อกลางเดือนมีนาคมที่ผ่านมา กฏหมายใหม่ของกรมสรรพากรคลอด ระบุให้สถาบันการเงินและผู้ให้บริการการเงินทุกเจ้า ส่งข้อมูลลูกค้าที่เข้าข่าย ส่งผลให้ผู้ขายออนไลน์ที่เลี่ยงภาษีอกสั่นขวัญแขวน

“#เวลานี้คือโอกาส ในปี-สองปีนี้ ผมคาดว่า ผู้ขายที่ไม่อยู่ในระบบภาษีจะลดน้อยลง และจะค่อยๆ ล้มหายตายจาก เพราะจะมีการเก็บข้อมูลรายได้ส่งสรรพากร การขายตาม marketplace แล้วไม่ยื่นภาษีหรือยื่นไม่ตรงตามจริง สร้างความเสี่ยงอย่างมาก”

การขายทุกวันนี้ขายเฉพาะในเว็บไซต์, IG, Facebook ของตัวเองอย่างเดียวไม่ได้โดยเด็ดขาด เพราะว่า เทรนด์การซื้อสินค้า ของคนไทย จะวิ่งเข้าไปหา marketplace อันดับต้นๆ ซึ่งก็มีอยู่ไม่กี่เจ้า ขอพูดถึงแค่ 2 อันดับคือ Lazada และ Shopee

มันมีวันหนึ่งที่ ผมคุยกับเพื่อนที่ชอบวิเคราะห์ตลาด เขาก็จะพูดว่า คนไทยติดโซเชียลมาก การซื้อสินค้าใดๆ จะต้องมีการอวดไปในตัวมีการถ่ายภาพและพูดถึงและแชร์เทรนด์การซื้อที่กำลังฮิตกันอยู่

สมมติเว็บไซต์, IG, Facebook คุณ ชื่อว่า “AAA” คนที่มาซื้อสินค้าเว็บ “AAA” ของคุณ เขาก็จะไม่แชร์อะไรเกี่ยวกับคุณ เพราะว่าคุณ no name มาก เค้าจะแชร์เฉพาะตัวสินค้าที่ซื้อมา ไม่มีการ reference อะไรมาก ว่าซื้อจากไหน หากยอดฟอลโล่วเพจ ต่ำกว่า 500,000 เรียกได้ว่า ตลาดวงมันแคบ ต้องหมดงบไปกับการโฆษณามหาศาล ทุกวันนี้ใครๆ ก็ขายของ ถ้าคุณยังขายเฉพาะที่ๆ คุณขาย ไม่มองโอกาสอื่น คุณน่าจะรู้สึกยอดขายที่ตกลง โดยเฉพาะอย่างยิ่งคนที่ขายของที่หาซื้อได้เกลื่อน

แต่คนที่ซื้อสินค้าจากช้อปปี้หรือลาซาด้า เขาจะพูดเรื่องนี้ได้ทั้งวันและเขาจะถ่ายรูปหรือแชร์สินค้าที่เขาเพิ่งซื้อหรือกำลังมองอยู่ อวดกันได้ตลอด

อันนี้คือเหตุผลหลักเลยว่าทำไมเราต้องลงไปขายในช้อปปี้และลาซาด้าด้วย เพราะคนขายสินค้าเยอะขึ้น คนทุกคนทำรายได้เสริม เพราะขายสินค้าง่ายนิดเดียว

เวลานี้คือโอกาส ในปี-สองปีนี้ ผมคาดว่า ผู้ขายที่ไม่อยู่ในระบบภาษีจะลงน้อยลง หันมาเข้าระบบมากขึ้น ส่วนที่ขยับขึ้นมาไม่ได้ และ สายป่านสั้น จะค่อยๆ ล้มหายตายจาก เพราะสถาบันการเงินและผู้ให้บริการการเงิน เช่น ธนาคาร และ อีวอลเล็ต (แอร์เพย์ ของชอปปี้ก็ถูกรวมเข้าไปด้วย) จะมีการเก็บข้อมูลรายรับส่งสรรพากร การขายตาม marketplace แล้วไม่ยื่นภาษีหรือยื่นไม่ตรงตามจริง สร้างความเสี่ยงอย่างมากจากการเรียกตรวจ

ผู้ขายที่ไม่ได้ตั้งราคาขายตามโครงสร้างภาษี มัวแต่กดราคา ตัดราคากันไปมา จะอยู่ไม่ได้ เพราะเมื่อไรที่ถูกบังคับเข้าระบบภาษี พวกเค้าจะขาดทุน มีมาร์จิ้นต่ำๆ จะไปตายตอนยื่นภาษี เพราะรายรับสูงแต่กำไรต่ำ และหัก เหมาจ่ายได้แค่ 60% (ทั้งที่รายรับอาจจะเป็นต้นทุน 70-90%)

การเข้าขายในตลาด matketplace ของคุณ ควรทำในปีนี้ แล้วปีหน้าจะเริ่มเห็นผล เพราะร้านจะปิดไปจำนวนมากจากการที่ยื่นภาษีแล้วขาดทุน และหากพวกเค้าไม่ยื่น ก็มีสิทธิ์โดนเรียกจากสรรพากร ในเวลานั้น ร้านของคุณก็ค่อยๆ เก็บแต้มและย้ายจุดยืนไปสู่จุดสูงขึ้นในตลาด marketplace

Business, Seller Tips

การเตรียมตัว ยื่นภาษีเงินได้บุคคลธรรมดา (ขายออนไลน์) ตอน 3

Leave a comment

มาถึงตรงนี้ เป็นตอนสุดท้ายแล้ว หลักจากที่เราเตรียมตัวทั้งรายได้ต่อปี และ หลักฐานลดหย่อนแล้วก็เป็นตอนจบแบบง่ายๆ เป็นเรื่องของการยื่นภาษี ที่เราทำออนไลน์ได้เลย ที่ www.rd.go.th

“ตอนที่ 3” การยื่นภาษี

การยื่นภาษีสำหรับบุคคลธรรมดา ค้าขายออนไลน์ ที่ไม่ได้จดภาษีมูลค่าเพิ่ม (VAT) จะมีแค่ 2 ตัวคือ

  1. ยื่นกลางปี เรียก ภงด 94 ใช้ยื่นรายได้ครึ่งปี ประมาณเดือน กรกฏาคมของทุกปี
  2. ยื่นปลายปี เรียก ภงด 90 ใช้ยื่นรายได้ทั้งปี ประมาณเดือน มกราคม – มีนาคม ปีถัดไป

ปีภาษี คือ 1 มค – 31 ธค เวลาเราเก็บเอกสารที่เกริ่นมาทั้งหมด เราต้องเก็บทั้งปี แยกเก็บเป็นเดือนๆ ไป แบ่งหมวดหมู่ไฟล์ เพื่อให้ง่าย เมื่อมีการเรียก

เห็นไม๊ว่า เมื่อเราทำเป็นระบบแล้ว เราไม่ต้องเดินทางไปสรรพากร และ เก็บเอกสารเอง ทุกอย่างที่บ้าน ยื่นออนไลน์ ภาพเว็บสรรพากรได้เลย

เพิ่มเติมคือ หากกิจการคุณมีรายได้ทั้งปีเกิน 1.8 ล้านบาท คุณต้องจด VAT แม้เป็นบุคคลธรรมดา ทำให้มีเรื่องภาษีและเอกสารเยอะขึ้น คือ คุณต้องมีการจ่ายภาษีขาย และ ออกเอกสารใบกำกับภาษีให้ลูกค้าทุกคน จากนั้นต้องนำส่งภาษีด้วยการยื่น ภาษี ภพ 30 ทุกเดือน ภายในวันที่ 15 ของเดือนถัดไป ทำให้ต้องมีคิดเรื่อง การทำบัญชีต้นทุนเพื่อยื่นค่าใช้จ่ายตามจริง ใช้ VAT ซื้อมาเป็นค่าใช้จ่าย ไม่งั้นหากยังทำแบบเหมาจ่าย จะจ่ายภาษีเยอะมาก เพราะภาษีบุคคลเป็นแบบขั้นบันได

จริงๆ เมื่อเราทำการตรวจสอบรายได้ของเราทุกเดือน เราจะทราบว่า เราจะมีแนวโน้มต้องจดหรือเปล่า เช่นรายรับรวม ใกล้เคียง 150,000 ต่อเดือน แปลว่าสิ้นปีมาคุณจะมียอดรายรับ 1.8 ล้านบาทและต้องจด VAT ซึ่งหลังจากจดแล้ว ความวุ่นวายคุณจะมากขึ้น

ถ้ารายได้เกิดขึ้นดังกล่าว และมีแนวโน้มต้องจด VAT อาจจะต้องไตร่ตรองในการจดทะเบียนนิติบุคคลและยื่นภาษีนิติบุคคลแทน จะลดค่าใช้จ่ายภาษีได้เยอะ เพราะอย่างไรก็ดีสุดท้ายแล้ว ต้องวุ่นวายทำบัญชีค่าใช้จ่าย ต้นทุน และ ยื่นภาษีมูลค่าเพิ่มเหมือนกัน

Business, Seller Tips

การเตรียมตัว ยื่นภาษีเงินได้บุคคลธรรมดา (ขายออนไลน์) ตอน 2

Leave a comment

ส่วนแรกของตอนที่แล้วเป็นการเตรียมข้อมูลส่วนของรายรับ โดยส่วนของรายจ่ายนั้น เราไม่ต้องเตรียมอะไร เพราะใช้วิธีหักออก แบบเหมาจ่าย 60% ตรงๆ ได้เลย ไม่ต้องเก็บบิลค่าใช้จ่ายและค่าสินค้าต้นทุนใดๆ

ส่วนตอนที่ 2 นี้ เป็นเรื่องการหักรายจ่ายเพิ่มเติม ที่สรรพากร และ รัฐบาลอนุญาตให้เราหักเพิ่ม เรียกว่า ค่าลดหย่อน ซึ่ง มีลดหย่อนส่วนตัว 60,000 ให้ทุกคน และ ยังมีลดหย่อนบุตร ลดหย่อนบิดามารดาอายุมากกว่า 60 ปี และ ลดหย่อนดูแลผู้พิการ ข้อมูลเงื่อนไขเหล่านี้อ่านได้เพิ่มเติมที่เว็บบัญชีอื่นๆ ซึ่งเราจะสรุป สิ่งที่ต้องรู้เท่านั้น

“ตอนที่ 2” เตรียมเอกสารลดหย่อน

ค่าลดหย่อนนั้นมีทั้งปี ให้เราเก็บเอกสารไว้เลย ทั้งที่เป็นกระดาษและเป็นไฟล์ เอกสารส่วนนี้จะเป็นเอกสารที่มีทั้งลิงก์เข้าระบบสรรพากร และ ไม่ลิงก์เข้าระบบ ทำให้เราต้องเก็บเอกสารไว้ และนำมากรอกได้ (อย่าปลอมแปลงนะ เพราะมีความผิดร้ายแรง) ให้เก็บไว้ตั้งแต่ต้นปี ไปยัน ท้ายปีเลย เพราะเราจะได้ใช้ 2 ครั้ง (ใบไหนยังไม่ออก ก็ยังไมไ่ด้ใช้)

  • ประเภทเอกสารหลักๆ (ต้องระบุชื่อ ที่อยู่ เราครบถ้วน)
    1. ใบรับรอง ดอกเบี้ยค่าบ้าน / คอนโด (ธนาคารที่เราผ่อนอยู่จะออกให้ทุกปี หลังปีใหม่ ช้าบ้างเร็วบ้าง โทรสอบถามเอา)
    2. ใบรับรอง เบี้ยประกันชีวิต / สุขภาพ (ประกันเราจะออกให้หลังปีใหม่ บางเจ้าต้องทำเรื่องขอ)
    3. ใบรับรอง เลี้ยงดูบิดามารดา อายุเกิน 60 (มีรายได้น้อยกว่า 30000 ต่อปี) ดาวน์โหลดจากเว็บสรรพากร (เตรียมไว้)
    4. ใบบริจาค (สำคัญมากกกกกก) บริจากวัดไหน ปอเต๊กตึ๊ง โรงพยาบาล โรงเรียน หรือ โครงการใดๆ มูลนิธิใดๆ อย่าลืมขอใบเสร็จมา หักลดหย่อนได้ทุกใบ เพราะถือว่า เราจ่ายภาษีพัฒนาสังคมของประเทศเรา ได้บุญแล้วยังหักภาษีได้ด้วย ในส่วนนี้ มีหักได้ 1 เท่า 2 เท่า ค่อยไปแบ่งกรอก ในช่องฟอร์ม
    5. ใบเสร็จ/ใบกำกับภาษี เต็มรูปแบบ ในกรณีรัฐบาลประกาศ ซื้อสินค้าประเภทใด ลดหย่อนได้ หรือ ช๊อปช่วยชาติ
    6. ใบหักภาษี ณ ที่จ่าย (ทวิ 50) ในกรณี รับเป็นค่าจ้างใดๆ หรือ เกิดจากรายรับใดๆ
  • ให้สแกนเก็บเป็นไฟล์ PDF เตรียมใช้ส่งเข้าระบบภาษีของสรรพากร เผื่อมีการเรียกขอ การเรียกขอดู (เวลาขอดู จะขอดูหลักฐานทุกๆ การลดหย่อน ต้องส่งหมด) เกิดขึ้นเมื่อใด ส่วนมากจะมีการเรียกขอเมื่อ
    1. ไม่เคยลดหย่อนด้วยรายการนี้ มาก่อน เช่นไม่เคยขอลดหย่อนด้วยดอกเบี้ยบ้านมาก่อน ปีนี้ซื้อบ้านก็มีดอกเบี้ยมาลดหย่อน หรือ ประกันชีวิต เป็นต้น
    2. ยอดลดหย่อนเยอะ เช่น ดอกเบี้ยบ้าน ดอกเบี้ยประกัน
    3. มีการขอคืนภาษีที่มีการหัก ณ ที่จ่ายนำส่งไป ปกติ หากเรามีการรับจ้างใดๆ แล้วได้รับค่าจ้าง นายจ้างจะมีใบ ทวิ 50 ให้เรา เป็นใบหัก ณ ที่จ่าย เราก็ต้องเก็บใบนี้ไว้ เพื่อมาขอคืนภาษีได้ ในกรณีเราไม่ถึงเกณฑ์ต้องจ่ายภาษีหลังหักลดหย่อน

เห็นไม๊ว่า ง่ายนิดเดียว เก็บ และ สแกน มาอ่านตอนต่อไป ตอนที่ 3 การยื่นภาษี

Business, Seller Tips

การเตรียมตัว ยื่นภาษีเงินได้บุคคลธรรมดา (ขายออนไลน์) ตอน 1

Leave a comment

เนื่องจากตอบคำถามเรื่องนี้บ่อย รวมถึงมีการหาข้อมูล และอ่านมาค่อนข้างเยอะ จึงนำมาเขียนเป็นบทความยาวๆ หลายๆ ตอน ให้ทำตามกันง่ายๆ บทความนี้เหมาะสำหรับคนที่อยากเข้าระบบจ่ายให้ถูกต้อง (ไม่เหมาะสำหรับคนพยายามเลี่ยงภาษี)

การยื่นภาษีเงินได้ บุคคลธรรมดา เป็นหน้าที่ของผู้มีรายได้ การขายของออนไลน์ ทุกช่องทาง เกิดรายได้ ทำให้เรามีหน้าที่ต้องยื่นตามกฏหมาย

การยื่นภาษี ไม่ได้หมายถึงคุณต้องจ่ายภาษี คร่าวๆ แล้ว มีรายได้มากกว่า 520,000 ต่อปี โดยไม่มีลดหย่อนอะไรเพิ่มเลย คุณไม่ได้จ่ายภาษี (แต่ถ้าไม่ยื่น มีความผิด)

ซึ่งตกเฉลี่ยเดือนละ 43,333 บาท (อ้างอิงจาก การยื่นภาษีแบบเหมาจ่าย 60%) รายได้ทั้งปี 520,000 เมื่อหักค่าใช้จ่ายแบบเหมา 60% เหลือ 208,000 แล้วยังหักลดหย่อนบุคคล (ได้ทุกคน) 60,000 เหลือ 148,000 บาท ซึ่งไม่ถึงเกินจ่ายภาษี (เกณฑ์จ่าย ปี 2561 อยู่ที่เงินรายได้สุทธิเกิน 150,000 บ)

บทความนี้จะเหมาะสำหรับผู้ต้องทำการแบบหักเหมาจ่าย มาเตรียมตัวไปพร้อมๆ กัน เพื่อง่ายต่อการยื่น และ ง่ายต่อการเตรียมเอกสาร หรือ ถูกสรรพากรเรียกเข้าพบ

ตอนที่ 1 เตรียมบัญชี (หลักฐานรายรับของคุณ)

เตรียมบัญชีธนาคารให้เป็นระบบ เปิดในชื่อเดียวกัน หรือ ชื่อร้าน เพื่อให้ง่ายต่อการแจ้งบัญชีลูกค้า และ ง่ายต่อการ ใช้จ่ายและแสดงเป็นบัญชีร้าน (มีที่มาที่ไป)

  1. แยกบัญชีส่วนตัว และ บัญชีธุรกิจชัดเจน ไม่เอาเงินมารวมกัน
  2. บัญชีธุรกิจ แยกเป็น
    1. กลุ่มบัญชีรับเงิน ซึ่งอาจจะมีหลายธนาคารเพื่อความสะดวกของลูกค้า และ คุณเองก็ต้องสะดวกในการเช็คยอด เมื่อรับเงินเข้ามาจากการขายสินค้า (เปิด internet banking ทุกบัญชี)
    2. บัญชีจ่ายเงิน บัญชีเดียว โดยเลือกบัญชีจ่ายเป็นบัญชีที่คุณสะดวกที่สุดในการใช้จ่ายต่างๆ และทุกๆ สิ้นเดือน (หรือวันที่คุณกำหนดเอง) ให้ถอนจากทุกบัญชีรับ นำมารวมกัน เพื่อมาฝากเข้าบัญชีเงินจ่าย โดยใช้วิธีถอนมาฝากหากมีหลายบัญชี หรือ หลายธนาคาร เพราะจะได้ไม่เป็นยอดฝากหลายยอด (เปิด internet banking)
  3. ดาวน์โหลด สเตทเม้นท์ จาก internet banking ของทุกบัญชีธนาคาร แยกเป็นรายเดือน บัญชีละ 12 เดือน เก็บในรูปแบบ PDF แนะนำให้ดาวน์โหลด ทุกๆ 3 เดือน เนื่องจาก internet banking จะอนุญาตให้ดูย้อนหลังได้ไม่เกิน 4 – 6 เดือน

เมื่อบัญชีรายรับของคุณเป็นระบบแบบนี้แล้ว ไม่ว่าคุณค้าขายกี่ช่องทาง เงินก็เข้ามารวมในบัญชีของคุณอยู่ดี ไม่ต้องไปตามเก็บว่า ยอดจากเฟซบุ๊คเท่าไร ยอดจากเว็บเท่าไร ยอดจาก Shopee และ Lazada เท่าไร มันจะปวดหัวเกินไป ถ้าคุณไม่ทำเป็นระบบ และ เมื่อนำรายรับเข้ารวมกันทุกบัญชี คุณก็จะได้ยอดรายรับต่อปี เพื่อไปคำนวณอย่างง่ายดาย

รวมถึงเป็นการตรวจสอบเงินได้ของคุณตลอดด้วย เพราะหากเมื่อไร ยอดรวมเกิน 1.8 ล้านต่อปี กฏหมายบังคับให้คุณจดภาษีมูลค่าเพิ่ม (VAT) ซึ่งจะมีความยุ่งยากกว่าเดิม อาจจะต้องไตร่ตรองในการปรับเป็นนิติบุคคลเพื่อลดค่าใช้จ่ายด้านภาษีลง

อ่านตอนต่อไป “ตอนที่ 2” เตรียมเอกสารลดหย่อน

Work stuff

DropzoneJs 5.5 & Thumbnail Problems

Leave a comment

DropzoneJs is a very good JavaScript upload script and flexible.

Too bad, upgrade is something a bit tricky and make existing script not work.  Well I would not complain if there is a good document, but there is not.

Problem with thumbnail not display when retrieve existing file. It used to be function createThumbnailFromUrl.  The parameter has changed so this solution does work

dz is your Dropzone object. The key is to have dataURL set on your file.

var thumb = { name: filename, size: 0, dataURL: ‘/upload-directory/’ + ‘filename’ };
dz.files.push(thumb);

// Call the default addedfile event handler
dz.emit(‘addedfile’, thumb);

dz.createThumbnailFromUrl(thumb,
dz.options.thumbnailWidth, dz.options.thumbnailHeight,
dz.options.thumbnailMethod, true, function (thumbnail) {
dz.emit(‘thumbnail’, thumb, thumbnail);
});

// Make sure that there is no progress bar, etc…
dz.emit(‘complete’, thumb);

Work stuff

jQuery Toggle/Manipulate FontAwesome 5

Leave a comment

FontAwesome is great, but after upgrade to 5, there are prefix types (far, fas, fab) added and then the way to render with SVG/JS to make its mess.  There are 2 types of use, but SVG/JS is way better in advance features to decorate the icons.

Not sure if it’s only me that seems the manual/instruction on how to manipulate the font awesome using SVG/JS does not work as promise. I have to figure it out myself.

So here is my solutions

This is jQuery toggle function to change from <i class=”fas fa-plus-circle”></i> to <i class=”fas fa-minus-circle”></i> icon

jQuery('.btn').on("click", function(){
   jQuery(this).find('[data-fa-i2svg]')
       .attr('data-prefix', 'fas');
    if (jQuery(this).find('[data-fa-i2svg]')
       .attr('data-icon') == 'minus-circle') {
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-minus-circle')
           .addClass('fa-plus-circle')
           .attr('data-icon', 'plus-circle');
   }else{
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-plus-circle')
           .addClass('fa-minus-circle')
           .attr('data-icon', 'minus-circle');
   }
});

Explanation:

  1. There are 2 elements that shared ‘data-fa-i2svg’ attribute (<i> and <svg>)
  2. You have to find the element with attribute ‘data-fa-i2svg’ then  add/remove class with original FontAwesome class which starts with fa-xxxxx.
  3. Change the attribute ‘data-icon’ to the FontAwesome class (eliminate the fa- prefix)
  4. Last thing, change the attribute ‘data-prefix'  to make it correct prefix type for each icon.

 

Work stuff

Bootstrap DateRangePicker & FancyBox

Leave a comment

Lately I have a messed problem that daterangepicker not function correctly on fancybox v. 2.1.5 (modal).

DateRangePicker w/ FancyBox
After fix problem. it works correctly

The problem is daterangepicker works fine on parent page, but not work on fancybox dialog. The calendar not showing, no error in console. I guess there is something not in the right place.

My keywords to searching for the answer  is “bootstrap daterangepicker fancybox” and not find any related answer so I try myself to use option “parentEl” of daterangepicker which seems for something and still not work, apparently I don’t know how to use it since there is no example or much explanation.

I’m finding a solution for a day, without any of daterangepicker explanation on the document how to use the option “parentEl”.  Not even mention that it is for use with modal. Would you say poor documentation?

The very short description says:

parentEl: (string) jQuery selector of the parent element that the date range picker will be added to, if not provided this will be ‘body’

So after reading the problem all over the internet, found that the modal have to use option “parentEl” but still don’t know how since there is no example. I have tried it myself several ways.

Here is my solution

add a script in the ajax file that loads inside fancyBox so it will be loaded right after the form.

<input type="text" name="date" id="date" value="" class="fancyBoxDateRangePicker">


$(document).ready(function(){
$('.fancyBoxDateRangePicker').daterangepicker({
"parentEl": ".fancybox-overlay",
});

The input with daterangepicker has a css class name “fancyBoxDateRangePicker”  (use your own) and the class “fancybox-overlay” is the default css class in fancyBox so you don’t have to do anything with that.

Then after you use this, still one more problem that the calendar layer will be loaded under the fancybox modal so you have to add style to override.

.daterangepicker.dropdown-menu {
max-width: none;
z-index: 99999 !important;
}

Then one more problem, if the parent screen scroll, you can add more style to fix it

.fancybox-lock {
overflow: visible !important;
}

 

Hope this will help your problem 😀